Vuex 4 正式发布！

本文由五柳翻译、润色，原文地址 。

这是 Vuex 4 的正式版本。

Vuex 4 的重点是兼容性。Vuex 4 支持使用 Vue 3 开发，并且直接提供了和 Vuex 3 完全相同的 API，因此用户可以在 Vue3 项目中复用现有的 Vuex 代码。

文章的下面一部分将介绍一些重大更改，因此请认真查看。

你可以在 example 目录中找到 Option API 和 Composition API 相关的基本用法。

文档

查看文档，请浏览 next.vuex.vuejs.org.

重大更改

更改了安装过程

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

现在，推荐用户使用新引入的 createStore 函数来创建一个 store 实例。

import { createStore } from 'vuex'

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

尽管从技术上来讲这并不是一个重大更改，你可能仍然使用的是 new Store(...) 的语法，但我们建议采用这种创建 store 的方式来和 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')

bundles（包） 和 Vue 3 对齐

生成以下 bundles 向 Vue 3 的 bundles 对齐：

1. vuex.global(.prod).js

• 在浏览器中直接和 <script src="..."> 一起使用。全局会暴露 Vuex 对象。
• 全局的构建是使用的 IIFE 的方式，而不是 UMD，并且这只能直接和 <script src="..."> 一起使用。
• 包含硬编码的 prod/dev 分支，并且 prod 的构建结果已最小化。可以使用 .prod.js 文件用于生产。

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

• 用于浏览器原生的 ES module 的方式引入（包括通过 <script type="module"> 支持浏览器的模块）

3. vuex.esm-bundler.js

• 适用于打包工具，例如 Webpack、Rollup 和 Parcel。
• 使用 prod/dev 分支会有 process.env.NODE_ENV 防护（guards）（即肯定会被该包所覆盖）
• 不提供缩小的版本（打包后和其他代码一起完成）。

4. vuex.cjs.js

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

ComponentCustomProperties 的类型检测

Vuex 4 删除其在 Vue 组件中的 this.$store 的全局类型，以解决 issue #994.。当和 TypeScript 一起使用时，必须要声明自己所扩展的模块（module）。

将以下代码放在你的项目中，以保证正确的 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>
  }
}

核心模块导出 createLogger 函数

在 Vuex 3，createLogger 函数是从 vuex/dist/logger 导出的，但是现在它被放入到核心包中。你可以直接从 vuex 包中引入该函数：

import { createLogger } from 'vuex'

我是五柳，喜欢创新、捣鼓源码，专注于 Vue3 源码、Vite 源码、前端工程化等技术分享，欢迎关注我的微信公众号：Code center。