Vuex

从 3.x 迁移到 4.0

几乎所有 Vuex 4 API 都保持了与 Vuex 3 的一致性。但是，仍然存在一些重大变更，您必须修复它们。

重大变更

安装流程

为了与新的 Vue 3 初始化流程保持一致，Vuex 的安装流程已更改。要创建新的存储，现在建议使用新引入的 createStore 函数。

import { createStore } from 'vuex'

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

要将 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')

注意

虽然这在技术上不是重大变更，但您仍然可以使用 new Store(...) 语法，我们建议您使用这种方法来与 Vue 3 和 Vue Router Next 保持一致。

TypeScript 支持

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

将以下代码放在您的项目中，以允许 this.$store 被正确地类型化

// vuex-shim.d.ts

import { 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>
  }
}

您可以在 TypeScript 支持 部分了解更多信息。

捆绑包现在与 Vue 3 对齐

生成以下捆绑包以与 Vue 3 捆绑包保持一致

  • vuex.global(.prod).js
    • 用于在浏览器中直接使用 <script src="...">。公开 Vuex 全局对象。
    • 全局构建被构建为 IIFE，而不是 UMD，并且仅用于直接使用 <script src="...">。
    • 包含硬编码的 prod/dev 分支，并且 prod 构建是预先压缩的。在生产环境中使用 .prod.js 文件。
  • vuex.esm-browser(.prod).js
    • 用于使用原生 ES 模块导入（包括通过 <script type="module"> 支持模块的浏览器）。
  • vuex.esm-bundler.js
    • 用于使用捆绑器，例如 webpack、rollup 和 parcel。
    • 保留 prod/dev 分支，并使用 process.env.NODE_ENV 保护（必须由捆绑器替换）。
    • 不提供压缩构建（在捆绑后与其余代码一起完成）。
  • vuex.cjs.js
    • 用于在 Node.js 服务器端渲染中使用 require()。

createLogger 函数从核心模块导出

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

import { createLogger } from 'vuex'

新功能

新的 useStore 组合函数

Vuex 4 引入了一个新的 API，用于在 Composition API 中与存储进行交互。您可以使用 useStore 组合函数在组件的 setup 钩子中检索存储。

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()
  }
}

您可以在 Composition API 部分了解更多信息。