周陆军博客

Appearance

On this page

从 3.x 迁移到 4.0 ​

几乎所有的 Vuex 4 API 都与 Vuex 3 保持不变。但是，仍有一些非兼容性变更需要注意。

非兼容性变更 ​

安装过程 ​

为了与 Vue 3 初始化过程保持一致，Vuex 的安装方式已经改变了。用户现在应该使用新引入的 createStore 方法来创建 store 实例。

javascript
import { createStore } from 'vuex'

export const store = createStore({
  state () {
    return {
      count: 1
    }
  }
})

要将 Vuex 安装到 Vue 实例中，需要用 store 替代之前的 Vuex 传递给 use 方法。

javascript
import { createApp } from 'vue'
import { store } from './store'
import App from './App.vue'

const app = createApp(App)

app.use(store)

app.mount('#app')

提示

从技术上讲这并不是一个非兼容性变更，仍然可以使用 new Store(...) 语法，但是建议使用上述方式以保持与 Vue 3 和 Vue Router Next 的一致。

TypeScript 支持 ​

为了修复 issue #994，Vuex 4 删除了 this.$store 在 Vue 组件中的全局类型声明。当使用 TypeScript 时，必须声明自己的模块补充(module augmentation)。

将下面的代码放到项目中，以允许 this.$store 能被正确的类型化：

typescript
// vuex-shim.d.ts

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

declare module '@vue/runtime-core' {
  // 声明自己的 store state
  interface State {
    count: number
  }

  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

在 TypeScript 支持章节可以了解到更多。

打包产物已经与 Vue 3 配套 ​

下面的打包产物分别与 Vue 3 的打包产物配套：

  • vuex.global(.prod).js
    • 通过 <script src="..."> 标签直接用在浏览器中，将 Vuex 暴露为全局变量。
    • 全局构建为 IIFE ， 而不是 UMD ，并且只能与 &lt;script src="..."&gt; 一起使用。
    • 包含硬编码的 prod/dev 分支，并且生产环境版本已经压缩过。生产环境请使用 .prod.js 文件。
  • vuex.esm-browser(.prod).js
    • 用于通过原生 ES 模块导入使用(在浏览器中通过 &lt;script type="module"&gt; 标签使用)。
  • vuex.esm-bundler.js
    • 用于与 webpack， rollup， parcel 等构建工具一起使用。
    • 通过 process .env.NODE_ENV 环境变量决定应该运行在生产环境还是开发环境（必须由构建工具替换）。
    • 不提供压缩后的构建版本(与打包后的其他代码一起压缩)
  • vuex.cjs.js
    • 通过 require 在 Node.js 服务端渲染使用。

:::