Vuex 4 迁移指南从 Vuex 3.x 升级到 4.0 的破坏性变更与新特性实战【免费下载链接】vuex️ Centralized State Management for Vue.js.项目地址: https://gitcode.com/gh_mirrors/vu/vuex本篇指南基于 Vuex 官方迁移文档docs/guide/migrating-to-4-0-from-3-x.md整理而成系统梳理从 Vuex 3.x 升级到 Vuex 4本仓库当前版本为 4.1.0时必须处理的破坏性变更安装流程、TypeScript 支持、构建产物形态以及createLogger的导出位置变化并介绍 Vuex 4 引入的新特性useStore组合式函数。读完本文你将能够对照迁移清单逐项改造现有 Vuex 3 项目完成与 Vue 3 生态对齐的升级。Vuex 4 的核心 API 几乎全部沿袭自 Vuex 3绝大多数代码无需改动即可继续工作真正的风险集中在少数破坏性变更上。先给出结论再逐项展开变更类别3.x 写法4.x 写法创建 storenew Vuex.Store({...})createStore({...})安装到应用Vue.use(Vuex)app.use(store)TypeScript 中的this.$store内置全局类型需自行声明模块扩充module augmentationcreateLogger导入vuex/dist/logger直接从vuex导入Composition API 取 store无需手动provide/injectuseStore()破坏性变更一安装流程Installation process为了与 Vue 3 全新的初始化流程对齐Vuex 4 的安装方式发生了改变。Vue 3 应用不再通过Vue.use()全局安装插件而是先创建应用实例、再通过app.use()安装 store。相应地Vuex 4 引入createStore函数用于创建 storeimport { createStore } from vuex export const store createStore({ state () { return { count: 1 } } })安装时把store 本身而不是 Vuex 插件对象传给app.use()import { createApp } from vue import { store } from ./store import App from ./App.vue const app createApp(App) app.use(store) app.mount(#app)从源码结构看createStore只是Store构造函数的语法糖在 src/store.js 中createStore(options)直接return new Store(options)而Store类在 src/store.js 中实现了install(app, injectKey)方法其核心工作是install (app, injectKey) { app.provide(injectKey || storeKey, this) app.config.globalProperties.$store this // ...devtools 接入 }即通过 Vue 3 的 Provide/Inject 机制向整棵组件树提供 store同时把它挂到app.config.globalProperties.$store从而保持 Options API 中this.$store的访问方式不变。提示严格来说new Store({...})的语法在 Vuex 4 中仍然可用Store类依旧被导出见 src/index.js并不构成破坏性变更。但官方推荐使用createStore以便与 Vue 3 和 Vue Router Next 的初始化风格保持一致。破坏性变更二TypeScript 支持Vuex 4移除了 Vue 组件内this.$store的全局类型声明这是为了解决 issue #994全局类型声明会污染所有组件的this类型推断。因此在 TypeScript 项目中必须自己声明模块扩充module augmentation为this.$store提供正确的类型。在项目中添加如下声明文件例如vuex-shim.d.ts// 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: StoreState } }这份声明文件需要被 TypeScript 纳入编译范围通常只要放在项目根目录或被tsconfig.json的include覆盖即可。更完整的类型化方案——包括使用InjectionKey为useStore注入类型、以及封装自定义useStore组合函数以避免到处传 key 的样板代码——参见 docs/guide/typescript-support.md仓库的类型声明位于 types/index.d.ts并有 types/test/index.ts 等类型测试用例持续校验。破坏性变更三构建产物与 Vue 3 对齐Bundles are now aligned with Vue 3Vuex 4 生成的构建产物与 Vue 3 保持完全一致的命名与形态约定共四类构建产物用途特点vuex.global(.prod).js浏览器script src...直接引入暴露Vuex全局变量IIFE 格式不再是 UMD内置硬编码的 prod/dev 分支.prod.js为预压缩版本生产环境必须使用vuex.esm-browser(.prod).js原生 ES Module 导入供浏览器script typemodule直接使用vuex.esm-bundler.js配合webpack、rollup、parcel等打包器保留process.env.NODE_ENV分支守卫由打包器在构建时替换不附带压缩版本压缩在整体打包后统一进行vuex.cjs.jsNode.js 服务端渲染SSR通过require()引入的 CommonJS 格式这六份产物含 prod 变体的产出规则定义在 rollup.config.jsvuex.esm-browser.js与vuex.esm-browser.prod.js为format: esbrowser: truevuex.esm-bundler.js为format: es且不标记 browservuex.global(.prod).js为format: iife其输出名固定为Vuexvuex.cjs.js为format: cjs。其中__DEV__的替换策略也印证了文档描述rollup.config.jsbundler 版本替换为(process.env.NODE_ENV ! production)表达式其余版本按构建环境硬编码为布尔值。在实际项目中package.json 的入口映射决定了不同环境下使用哪份产物main指向dist/vuex.cjs.jsNode/CommonJS、module指向dist/vuex.esm-bundler.js打包器、browser指向dist/vuex.esm-browser.js浏览器原生 ESM、unpkg/jsdelivr指向dist/vuex.global.jsCDN 直接引入。此外本仓库还提供dist/vuex.mjs见 package.json 的exports.import与 src/index.mjs 的 re-export 逻辑用于 Node ESM 场景并有 test/esm/esm-import.mjs 与 test/esm/esm-test.js 对其做端到端验证。升级时建议检查自己的引入方式凡是依赖 UMD 全局脚本加载方式的项目需要改为 IIFE 的vuex.global.js或改用打包器/ES Module 方案生产环境务必切换到.prod产物。破坏性变更四createLogger从核心模块导出在 Vuex 3 中createLogger需要从vuex/dist/logger单独导入Vuex 4 将其并入核心包直接由vuex包导出import { createLogger } from vuex对应地src/index.js 中createLogger从./plugins/logger导入并随默认导出对象与命名导出一起暴露。升级时只需删除旧的vuex/dist/logger导入语句统一从vuex导入即可。createLogger本身提供了丰富的日志控制选项实现位于 src/plugins/logger.js各参数及其默认值如下参数默认值作用collapsedtrue是否折叠 console 分组groupCollapsedvsgroupfilter(mutation, stateBefore, stateAfter) true过滤哪些 mutation 需要记录transformerstate state输出前转换 state如序列化为 JSONmutationTransformermut mut输出前转换 mutation 记录actionFilter(action, state) true过滤哪些 action 需要记录actionTransformeract act输出前转换 action 记录logMutationstrue是否记录 mutationlogActionstrue是否记录 actionloggerconsole自定义日志对象其实现通过store.subscribe订阅 mutation、通过store.subscribeAction订阅 action每次变更时深拷贝前后 state并以%c样式输出 prev state、mutation、next state 三行便于在 Vue Devtools 之外快速定位状态变更链路。新特性useStore组合式函数Vuex 4 新增了面向 Composition API 的useStore函数用于在组件的setup钩子中获取 store 实例import { useStore } from vuex export default { setup () { const store useStore() // store.state.count / store.getters / store.commit / store.dispatch ... } }useStore的底层实现非常简单本质是对 Vue 3inject的封装src/injectKey.jsexport const storeKey store export function useStore (key null) { return inject(key ! null ? key : storeKey) }它从组件树上注入由Store.installapp.provide(injectKey || storeKey, this)提供的 store 实例。默认使用内置的storeKey字符串store在 TypeScript 项目中可以传入自定义的InjectionKeyStoreState以获得类型完整的 store该 key 需要在安装时一并传入app.use(store, key)详细做法见 docs/guide/typescript-support.md。在setup中使用 store 的完整姿势如下见 docs/guide/composition-api.mdimport { computed } from vue import { useStore } from vuex export default { setup () { const store useStore() return { // 用 computed 保持响应式 count: computed(() store.state.count), double: computed(() store.getters.double), // 提交 mutation 与派发 action increment: () store.commit(increment), asyncIncrement: () store.dispatch(asyncIncrement) } } }仓库中的 examples/composition 目录提供了完整的 Composition API 示例应用counter、chat、shopping-cart、todomvc 等例如 examples/composition/counter/store.js 展示了createStoreuseStore的最小闭环用法是迁移后验证新 API 的良好参照。迁移自检清单完成上述改造后建议按以下清单逐项确认创建与安装new Vuex.Store(...)已替换为createStore(...)Vue.use(Vuex)已替换为app.use(store)且app.use(store)在app.mount()之前调用。TypeScript 类型已添加模块扩充声明文件vuex-shim.d.ts或vuex.d.tsthis.$store与useStore()均获得正确类型类型测试可参考 types/test/index.ts。构建产物确认所引用的 bundle 是 Vue 3 对齐后的新命名vuex.global.js、vuex.esm-browser.js、vuex.esm-bundler.js、vuex.cjs.js生产环境使用.prod变体若通过 CDN 引入注意 Global 构建已从 UMD 改为 IIFE。日志插件createLogger已从vue包导入import { createLogger } from vuex旧路径vue/dist/logger已移除。Vue 版本Vuex 4 的 peer dependency 为 Vue^3.2.0见 package.json请确保项目中的 Vue 版本满足该要求在升级 Vuex 前应先完成 Vue 2 → Vue 3 的迁移。最后提醒迁移文档对应的进一步阅读入口为 docs/guide/typescript-support.md 与 docs/guide/composition-api.md安装方式参见 docs/installation.md。官方建议在 Vuex 4 迁移时尽量以createStoreuseStore的新风格书写新代码将旧的 Options API 风格代码逐步收敛到新 API 上。【免费下载链接】vuex️ Centralized State Management for Vue.js.项目地址: https://gitcode.com/gh_mirrors/vu/vuex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Vuex 4 迁移指南：从 Vuex 3.x 升级到 4.0 的破坏性变更与新特性实战
Vuex 4 迁移指南从 Vuex 3.x 升级到 4.0 的破坏性变更与新特性实战【免费下载链接】vuex️ Centralized State Management for Vue.js.项目地址: https://gitcode.com/gh_mirrors/vu/vuex本篇指南基于 Vuex 官方迁移文档docs/guide/migrating-to-4-0-from-3-x.md整理而成系统梳理从 Vuex 3.x 升级到 Vuex 4本仓库当前版本为 4.1.0时必须处理的破坏性变更安装流程、TypeScript 支持、构建产物形态以及createLogger的导出位置变化并介绍 Vuex 4 引入的新特性useStore组合式函数。读完本文你将能够对照迁移清单逐项改造现有 Vuex 3 项目完成与 Vue 3 生态对齐的升级。Vuex 4 的核心 API 几乎全部沿袭自 Vuex 3绝大多数代码无需改动即可继续工作真正的风险集中在少数破坏性变更上。先给出结论再逐项展开变更类别3.x 写法4.x 写法创建 storenew Vuex.Store({...})createStore({...})安装到应用Vue.use(Vuex)app.use(store)TypeScript 中的this.$store内置全局类型需自行声明模块扩充module augmentationcreateLogger导入vuex/dist/logger直接从vuex导入Composition API 取 store无需手动provide/injectuseStore()破坏性变更一安装流程Installation process为了与 Vue 3 全新的初始化流程对齐Vuex 4 的安装方式发生了改变。Vue 3 应用不再通过Vue.use()全局安装插件而是先创建应用实例、再通过app.use()安装 store。相应地Vuex 4 引入createStore函数用于创建 storeimport { createStore } from vuex export const store createStore({ state () { return { count: 1 } } })安装时把store 本身而不是 Vuex 插件对象传给app.use()import { createApp } from vue import { store } from ./store import App from ./App.vue const app createApp(App) app.use(store) app.mount(#app)从源码结构看createStore只是Store构造函数的语法糖在 src/store.js 中createStore(options)直接return new Store(options)而Store类在 src/store.js 中实现了install(app, injectKey)方法其核心工作是install (app, injectKey) { app.provide(injectKey || storeKey, this) app.config.globalProperties.$store this // ...devtools 接入 }即通过 Vue 3 的 Provide/Inject 机制向整棵组件树提供 store同时把它挂到app.config.globalProperties.$store从而保持 Options API 中this.$store的访问方式不变。提示严格来说new Store({...})的语法在 Vuex 4 中仍然可用Store类依旧被导出见 src/index.js并不构成破坏性变更。但官方推荐使用createStore以便与 Vue 3 和 Vue Router Next 的初始化风格保持一致。破坏性变更二TypeScript 支持Vuex 4移除了 Vue 组件内this.$store的全局类型声明这是为了解决 issue #994全局类型声明会污染所有组件的this类型推断。因此在 TypeScript 项目中必须自己声明模块扩充module augmentation为this.$store提供正确的类型。在项目中添加如下声明文件例如vuex-shim.d.ts// 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: StoreState } }这份声明文件需要被 TypeScript 纳入编译范围通常只要放在项目根目录或被tsconfig.json的include覆盖即可。更完整的类型化方案——包括使用InjectionKey为useStore注入类型、以及封装自定义useStore组合函数以避免到处传 key 的样板代码——参见 docs/guide/typescript-support.md仓库的类型声明位于 types/index.d.ts并有 types/test/index.ts 等类型测试用例持续校验。破坏性变更三构建产物与 Vue 3 对齐Bundles are now aligned with Vue 3Vuex 4 生成的构建产物与 Vue 3 保持完全一致的命名与形态约定共四类构建产物用途特点vuex.global(.prod).js浏览器script src...直接引入暴露Vuex全局变量IIFE 格式不再是 UMD内置硬编码的 prod/dev 分支.prod.js为预压缩版本生产环境必须使用vuex.esm-browser(.prod).js原生 ES Module 导入供浏览器script typemodule直接使用vuex.esm-bundler.js配合webpack、rollup、parcel等打包器保留process.env.NODE_ENV分支守卫由打包器在构建时替换不附带压缩版本压缩在整体打包后统一进行vuex.cjs.jsNode.js 服务端渲染SSR通过require()引入的 CommonJS 格式这六份产物含 prod 变体的产出规则定义在 rollup.config.jsvuex.esm-browser.js与vuex.esm-browser.prod.js为format: esbrowser: truevuex.esm-bundler.js为format: es且不标记 browservuex.global(.prod).js为format: iife其输出名固定为Vuexvuex.cjs.js为format: cjs。其中__DEV__的替换策略也印证了文档描述rollup.config.jsbundler 版本替换为(process.env.NODE_ENV ! production)表达式其余版本按构建环境硬编码为布尔值。在实际项目中package.json 的入口映射决定了不同环境下使用哪份产物main指向dist/vuex.cjs.jsNode/CommonJS、module指向dist/vuex.esm-bundler.js打包器、browser指向dist/vuex.esm-browser.js浏览器原生 ESM、unpkg/jsdelivr指向dist/vuex.global.jsCDN 直接引入。此外本仓库还提供dist/vuex.mjs见 package.json 的exports.import与 src/index.mjs 的 re-export 逻辑用于 Node ESM 场景并有 test/esm/esm-import.mjs 与 test/esm/esm-test.js 对其做端到端验证。升级时建议检查自己的引入方式凡是依赖 UMD 全局脚本加载方式的项目需要改为 IIFE 的vuex.global.js或改用打包器/ES Module 方案生产环境务必切换到.prod产物。破坏性变更四createLogger从核心模块导出在 Vuex 3 中createLogger需要从vuex/dist/logger单独导入Vuex 4 将其并入核心包直接由vuex包导出import { createLogger } from vuex对应地src/index.js 中createLogger从./plugins/logger导入并随默认导出对象与命名导出一起暴露。升级时只需删除旧的vuex/dist/logger导入语句统一从vuex导入即可。createLogger本身提供了丰富的日志控制选项实现位于 src/plugins/logger.js各参数及其默认值如下参数默认值作用collapsedtrue是否折叠 console 分组groupCollapsedvsgroupfilter(mutation, stateBefore, stateAfter) true过滤哪些 mutation 需要记录transformerstate state输出前转换 state如序列化为 JSONmutationTransformermut mut输出前转换 mutation 记录actionFilter(action, state) true过滤哪些 action 需要记录actionTransformeract act输出前转换 action 记录logMutationstrue是否记录 mutationlogActionstrue是否记录 actionloggerconsole自定义日志对象其实现通过store.subscribe订阅 mutation、通过store.subscribeAction订阅 action每次变更时深拷贝前后 state并以%c样式输出 prev state、mutation、next state 三行便于在 Vue Devtools 之外快速定位状态变更链路。新特性useStore组合式函数Vuex 4 新增了面向 Composition API 的useStore函数用于在组件的setup钩子中获取 store 实例import { useStore } from vuex export default { setup () { const store useStore() // store.state.count / store.getters / store.commit / store.dispatch ... } }useStore的底层实现非常简单本质是对 Vue 3inject的封装src/injectKey.jsexport const storeKey store export function useStore (key null) { return inject(key ! null ? key : storeKey) }它从组件树上注入由Store.installapp.provide(injectKey || storeKey, this)提供的 store 实例。默认使用内置的storeKey字符串store在 TypeScript 项目中可以传入自定义的InjectionKeyStoreState以获得类型完整的 store该 key 需要在安装时一并传入app.use(store, key)详细做法见 docs/guide/typescript-support.md。在setup中使用 store 的完整姿势如下见 docs/guide/composition-api.mdimport { computed } from vue import { useStore } from vuex export default { setup () { const store useStore() return { // 用 computed 保持响应式 count: computed(() store.state.count), double: computed(() store.getters.double), // 提交 mutation 与派发 action increment: () store.commit(increment), asyncIncrement: () store.dispatch(asyncIncrement) } } }仓库中的 examples/composition 目录提供了完整的 Composition API 示例应用counter、chat、shopping-cart、todomvc 等例如 examples/composition/counter/store.js 展示了createStoreuseStore的最小闭环用法是迁移后验证新 API 的良好参照。迁移自检清单完成上述改造后建议按以下清单逐项确认创建与安装new Vuex.Store(...)已替换为createStore(...)Vue.use(Vuex)已替换为app.use(store)且app.use(store)在app.mount()之前调用。TypeScript 类型已添加模块扩充声明文件vuex-shim.d.ts或vuex.d.tsthis.$store与useStore()均获得正确类型类型测试可参考 types/test/index.ts。构建产物确认所引用的 bundle 是 Vue 3 对齐后的新命名vuex.global.js、vuex.esm-browser.js、vuex.esm-bundler.js、vuex.cjs.js生产环境使用.prod变体若通过 CDN 引入注意 Global 构建已从 UMD 改为 IIFE。日志插件createLogger已从vue包导入import { createLogger } from vuex旧路径vue/dist/logger已移除。Vue 版本Vuex 4 的 peer dependency 为 Vue^3.2.0见 package.json请确保项目中的 Vue 版本满足该要求在升级 Vuex 前应先完成 Vue 2 → Vue 3 的迁移。最后提醒迁移文档对应的进一步阅读入口为 docs/guide/typescript-support.md 与 docs/guide/composition-api.md安装方式参见 docs/installation.md。官方建议在 Vuex 4 迁移时尽量以createStoreuseStore的新风格书写新代码将旧的 Options API 风格代码逐步收敛到新 API 上。【免费下载链接】vuex️ Centralized State Management for Vue.js.项目地址: https://gitcode.com/gh_mirrors/vu/vuex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
