Vuex 4.0 正式发布！新年，官方生态齐聚一堂。

2023-05-07 1150

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vuex 4 官方版本正式发布。Vuex 4 的重点是兼容性。Vuex 4 支持 Vue 3，但是仍然提供了与 Vuex 3 完全相同的 API，因此用户可以在 Vue 3 中直接复用他们现有的 Vuex 代码。

Vuex 4 官方版本正式发布。

Vuex 4 的重点是兼容性。Vuex 4 支持 Vue 3，但是仍然提供了与 Vuex 3 完全相同的 API，因此用户可以在 Vue 3 中直接复用他们现有的 Vuex 代码。

下文会把破坏性的改动列出来，请注意查看。

在源码的 example 文件夹^[1]可以看到 Optional 和 Composition API 下的基本用法。

它仍然和 Vue 3 一样在 NPM 包的 next 标签下发布，我们计划在 Vue3 准备好的时候移除 next 标签。

为了 Vuex 4 的稳定发布，大家齐心协力做出了很多贡献。非常感谢你们的帮助。若不是有如此出色的 Vue 社区，根本不可能实现这一切！

文档

请访问 next.vuex.vuejs.org^[2] 查看文档。

破坏性变动

安装流程更改

为了和 Vue3 的初始化流程一致，Vuex 的安装流程有所改动。

我们建议用户用新的函数来建立一个实例。createStorestore

import { createStore } from "vuex";
export const store = createStore({
  state() {
    return {
      count: 1,
    };
  },
});

同时这在技术上并不是一个破坏性的改动，你依然可以用语法，不过我们推荐你用新语法，这样可以和 Vue3 以及 Vue Router 4 保持一致。new Store(...)

在 Vue 实例上安装 Vuex，传递 store 即可。

import { createApp } from "vue";
import { store } from "./store";
import App from "./App.vue";
const app = createApp(App);
app.use(store);
app.mount("#app");

构建产物和 Vue3 一致

以下的构建产物可以和 Vue3 的产物保持一致：

vuex.global(.prod).js

直接在浏览器中使用，暴露全局 Vuex 变量。<script src="...">
全局构建会被打包成 IIFE，并不是 UMD，仅用于直接使用引入。<script src="...">
包含了硬编码的分支判断，是压缩后的，在生产环境记得使用这个文件。prod/devprod.js

vuex.esm-broswer(.prod).js

为了使用 native ES module imports（需要浏览器支持 es module 用法，）<script type="module">

vuex.esm-bundler.js

为了通过 , , 等构建工具使用模块。webpackrolluppercel
保留分支判断和判断（这个变量需要被构建工具替换）prod/devprocess.env.NODE_ENV
并不会提供 minified 版本（构建工具可以引入后一起处理）

vuex.cjs.js

为了使用 Node.js 服务端渲染时通过导入。require()

类型 `ComponentCustomProperties`

Vuex 4 移除了为了推导而编写的全局类型，解决了 issue #994^[3]，在使用 TypeScript 时，你必须自己手动添加模块类型声明。this.$store

在项目中使用如下的代码，就可以正确推导：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>;
  }
}