GMTC深圳站售票最后一周,点击查看最新日程>> 了解详情
写点什么

Vuex 4 正式发布:打包现在与 Vue 3 一致

  • 2021 年 2 月 05 日
  • 本文字数:1317 字

    阅读完需:约 4 分钟

Vuex 4 正式发布:打包现在与 Vue 3 一致

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。Vuex 采用集中式存储管理应用的所有组件组件的状态。换句话说,Vuex 就是帮开发者存储多个组件共享的数据,方便开发者对其读取的更改的工具。


Vuex 4 正式版本现已正式发布。


Vuex 4 的改进重点是兼容性。Vuex 4 支持 Vue 3,并提供了与 Vuex 3 完全相同的 API,因此用户可以在 Vue 3 中重用现有的 Vuex 代码。


这个版本还包含一些重大更改,详情见后文。


关于 Option 和 Composition API 的基本用法,请参见 example 目录。


新版还是用 NPM 包发布,放在 next 标签下,和 Vue 3 是一样的。我们计划在 Vue 3 拿掉 next 标签后一并移除 Vuex 4 的 next 标签。


社区为 Vuex 4 的稳定版做出了许多贡献,感谢大家的帮助。

文档

要查看文档,请访问Vuex 官网

重大更改

安装流程已更改

为了与新的 Vue 3 初始化流程保持一致,Vuex 的安装流程已更改。


用户要创建新的 store 实例时,推荐使用新引入的 createStore 函数。


import { createStore } from 'vuex'export const store = createStore({  state() {    return {      count: 1    }  }})
复制代码


从技术上来讲这并不是一个重大更改,不过你还是可以使用 newStore(...)语法,我们建议大家用这种方法来和 Vue 3、Vue Router 4 保持一致。


要将 Vuex 安装到 Vue 实例,请传递 store 实例(而不是 Vuex)。


import { createApp } from 'vue'import { store } from './store'import App from './App.vue'const app = createApp(App)app.use(store)app.mount('#app')
复制代码

打包现在与 Vue 3 一致

新版会生成以下包,以同 Vue 3 包一致:


  • vuex.global(.prod).js

  • 在浏览器中直接用于<scriptsrc="...">。全局公开 Vuex。

  • 全局构建是作为 IIFE 而不是 UMD 构建的,并且只能与<scriptsrc="...">直接共用。

  • 包含硬编码的 prod/dev 分支,并且 prod 构建已预先最小化。使用.prod.js 文件用于生产。

  • vuex.esm-browser(.prod).js

  • 用于原生 ES 模块导入(包括通过<script type="module">支持模块的浏览器。)

  • vuex.esm-bundler.js

  • 用于 webpack、rollup 和 parcel 等打包器。

  • 带有 process.env.NODE_ENV 防护的 prod/dev 分支不受影响(必须由打包器代替)。

  • 不提供缩小的构建(打包后与剩余代码一起处理)。

  • vuex.cjs.js

  • 用于带有 require()的 Node.js 服务端渲染。

ComponentCustomProperties 的类型化

Vuex 4 删除了其在 Vue 组件中 this.$store 的全局类型,以解决问题 #994。与 TypeScript 一起使用时,用户必须声明自己的模块扩充。


将以下代码放在你的项目中,以使 this.$store 正确类型化:


// vuex-shim.d.tsimport { ComponentCustomProperties } from 'vue'import { Store } from 'vuex'declare module '@vue/runtime-core' {  // Declare your own store states.  interface State {    count: number  }  interface ComponentCustomProperties {    $store: Store<State>  }}
复制代码

从核心模块导出 createLogger 函数

在 Vuex 3 中,createLogger 函数是从 vuex/dist/logger 导出的,但它现在已包含在核心包中。你应该直接从 vuex 包导入该函数。


import { createLogger } from 'vuex'
复制代码

4.0.0-rc.2 后加入的错误修复

  • 导出缺少的 storeKey(4ab2947)

  • 修复在 Webpack 包中无法摇树的问题(#1906)(#1907)(aeddf7a)


原文链接:


https://github.com/vuejs/vuex/releases

2021 年 2 月 05 日 12:003871

评论

发布
暂无评论
发现更多内容

mysql的timestamp会存在时区问题?,深入jvm虚拟机百度云

MySQL神话

Java 程序员 后端开发

MySQL规范与性能优化,java教程视频我赢职场

MySQL神话

Java 程序员 后端开发

Android性能优化系列之apk瘦身,差点无缘Offer

嘟嘟侠客

android 程序员 移动开发

Netty 源码分析系列(八)Netty 如何实现零拷贝,圣思园张龙百度云

MySQL神话

Java 程序员 后端开发

MySQL数据库基础知识及优化,java高并发面试题

MySQL神话

Java 程序员 后端开发

Android性能优化之启动加速35%,Android系列学习进阶视频

嘟嘟侠客

android 程序员 移动开发

Android C++系列:Linux信号(二)

轻口味

c++ android jni 11月日更

Android悬浮窗看这篇就够了,android笔试面试题

嘟嘟侠客

android 程序员 移动开发

Android手机验证码倒计时控件,flutter弹窗

嘟嘟侠客

android 程序员 移动开发

mysql的基本管理,dubbo和zookeeper面试

MySQL神话

Java 程序员 后端开发

MySQL面试题精选:事务ACID原理,mybatis架构

MySQL神话

Java 程序员 后端开发

MySQL的binlog有啥用,谁写的,在哪里,java框架技术本身

MySQL神话

Java 程序员 后端开发

Android性能优化之启动速度优化,2021Android最新大厂面试真题

嘟嘟侠客

android 程序员 移动开发

Netty 学习之旅:ByteBuf 篇之 ByteBuf 内部结构与 API 学习,java免费视频网站

MySQL神话

Java 程序员 后端开发

MySQL海量数据处理及优化(1),linux操作系统下载百度云

MySQL神话

Java 程序员 后端开发

MySQL海量数据处理及优化,mybatis框架原理

MySQL神话

Java 程序员 后端开发

MySQL热点面试题:为什么我使用了索引,查询还是慢,linuxshell脚本教程

MySQL神话

Java 程序员 后端开发

大厂算法面试之leetcode精讲8.滑动窗口

全栈潇晨

算法面试 Leet Code

android快速开发--常用utils类,androidstudio期末项目

嘟嘟侠客

android 程序员 移动开发

MySQL面试题:谈谈MySQL 索引,B,java面试常问的面试题

MySQL神话

Java 程序员 后端开发

Android打造不一样的新手引导页面(二),Android程序员的春天

嘟嘟侠客

android 程序员 移动开发

MySQL深度解析,基础+高级篇数据库教程-从入门到入坟,SpringCloud微服务详解

MySQL神话

Java 程序员 后端开发

Android性能优化之绘制优化全面解析,flutterplugin依赖

嘟嘟侠客

android 程序员 移动开发

Android性能优化常见Q,android进程清理

嘟嘟侠客

android 程序员 移动开发

Android性能优化,这一篇有你想要的所有答案!,一个Android程序员的面试心得

嘟嘟侠客

android 程序员 移动开发

MySQL:一个奇怪的hang案例,java基础程序代码

MySQL神话

Java 程序员 后端开发

ndinx安装手册,看了谷歌大神写的Spring源码笔记

MySQL神话

Java 程序员 后端开发

Netty inEventLoop方法?异步回调?Promise,mongodb面试题目

MySQL神话

Java 程序员 后端开发

Android微信分享图片按质量压缩的解决方案,Android学习笔记在互联网上火了

嘟嘟侠客

android 程序员 移动开发

Android性能优化三:APP启动时间测量,技术总监都拍手叫好

嘟嘟侠客

android 程序员 移动开发

Android手机QQ的UI自动化实践,BAT面试&高级进阶

嘟嘟侠客

android 程序员 移动开发

“你好,元宇宙”华为云联创营元宇宙高峰论坛

“你好,元宇宙”华为云联创营元宇宙高峰论坛

Vuex 4 正式发布:打包现在与 Vue 3 一致-InfoQ