匠心国粹，品鉴非凡：探寻“国精产品”的“一品二品”时代韵味

Vuex4中组件与Store交互方式对比Options API通过mapState/mapGetters/mapMutations/mapActions等辅助函数或this.$store直接访问Composition API则统一使用useStore获取实例配合computed/watch实现响应式访问。

关键区别在于Options API自动处理响应式按选项组织代码Composition API需手动包装状态按功能逻辑组织代码。

Mutation必须同步修改状态Action可包含异步操作Getter用于派生计算属性。

Vuex4专为Vue3设计提供完整TypeScript支持模块系统通过命名空间管理状态隔离。

两种API风格都能有效实现状态管理开发者可根据项目需求选择适合的方式。

Vuex是Vue.js的状态管理库提供集中式存储和可预测的状态变更。

Pinia已成为Vue官方推荐的新状态管理库兼容Vue

xAPI与Vuex5类似。

Vuex3/4将继续维护但不添加新功能。

两者可共存但新项目建议使用Pinia。

Vuex的核心流程包括组件通过dispatch触发actions异步操作actions通过commit调用mutations同步修改state最终state变化触发视图更新。

Vuex 4 中视图(组件)与 Store 交互 - Options API交互场景对应 API使用方式适用场景特点获取状态mapState

数组形式mapState([count, user])

对象形式mapState({ localCount: count })

函数形式mapState({ sum: state state.a state.b })组件需要访问 store 中的状态- 将 store 状态映射为组件的计算属性- 自动响应状态变化- Options API 专用辅助函数获取派生状态mapGetters

数组形式mapGetters([doneTodos])

对象形式mapGetters({ doneCount: doneTodosCount })组件需要访问计算后的状态- 映射为组件的计算属性- 复用复杂状态逻辑- Options API 专用辅助函数提交变更mapMutations

数组形式mapMutations([increment])

对象形式mapMutations({ add: increment })组件需要提交 mutation 同步修改状态- 映射为组件方法- 只能同步操作- Options API 专用辅助函数分发动作mapActions

数组形式mapActions([fetchUser])

对象形式mapActions({ getUser: fetchUser })组件需要触发异步操作或复杂业务逻辑- 映射为组件方法- 可包含异步操作- Options API 专用辅助函数模块交互命名空间辅助函数createNamespacedHelpers(moduleName)const { mapState } createNamespacedHelpers(user)访问特定命名空间模块的状态/方法- 简化命名空间模块的访问- 避免名称冲突- Options API 专用直接访问this.$storethis.$store.state.countthis.$store.commit(increment)this.$store.dispatch(fetchUser)在组件方法中直接操作 store- 不需要辅助函数映射- 适合在组件方法内部使用模块交互命名空间路径this.$store.state.moduleA.datathis.$store.getters[moduleA/getterName]this.$store.commit(moduleA/mutationName)直接访问模块内的内容- 需要知道完整路径- 适合简单访问- Options API 中通过this.$store访问Vuex 4 中视图(组件)与 Store 交互 - Composition API交互场景对应 API使用方式适用场景特点获取 store 实例useStoreimport { useStore } from vuexconst store useStore()获取 Vuex store 实例- Composition API 的入口点- 必须在setup()函数内调用获取状态store.statecomputedconst count computed(() store.state.count)const user computed(() store.state.user)访问 store 中的状态- 结合 Vue 3 的computed函数- 自动响应式更新获取派生状态store.getterscomputedconst doneTodos computed(() store.getters.doneTodos)const filteredList computed(() store.getters[module/filtered])访问计算后的状态- 直接访问 getters 对象- 支持命名空间路径提交变更store.commit

字符串风格store.commit(increment, payload)

对象风格store.commit({ type: increment, ...payload })

命名空间store.commit(module/increment, payload)提交 mutation 同步修改状态- 直接调用 store 实例方法- 支持所有 mutation 调用方式分发动作store.dispatch

字符串风格store.dispatch(fetchUser, payload)

对象风格store.dispatch({ type: fetchUser, ...payload })

命名空间store.dispatch(module/fetchUser, payload)触发异步操作或复杂业务逻辑- 直接调用 store 实例方法- 支持所有 action 调用方式响应状态变化watchstore.statewatch(() store.state.user, (newVal) {...})watch(() store.state.module.data, handler)监听 store 中特定状态的变化- 精细控制监听逻辑- 可执行副作用操作- Composition API 风格响应状态变化watchEffectwatchEffect(() { console.log(store.state.count) })自动追踪依赖的状态变化- 自动收集依赖- 立即执行一次模块交互直接路径访问store.state.moduleA.datastore.getters[moduleA/getterName]store.commit(moduleA/mutationName)store.dispatch(moduleA/actionName)直接访问模块内的内容- 需要知道完整路径- 统一通过 store 实例访问创建响应式引用toRefsstore.stateimport { toRefs } from vueconst { count, user } toRefs(store.state)将状态解构为响应式引用- 保持响应式的同时解构状态- 避免.value访问代码示例对比Options API 示例import { mapState, mapGetters, mapActions, mapMutations } from vuex export default { computed: { // 映射状态 ...mapState([count, user]), ...mapState({ localCount: count }), // 映射 getters ...mapGetters([doubleCount]) }, methods: { // 映射 mutations ...mapMutations([increment]), // 映射 actions ...mapActions([fetchUser]), // 直接通过 $store 访问 customMethod() { this.$store.commit(increment) this.$store.dispatch(fetchUser) } } }Composition API 示例import { useStore } from vuex import { computed, watch } from vue export default { setup() { const store useStore() // 状态访问 const count computed(() store.state.count) const user computed(() store.state.user) // getters 访问 const doubleCount computed(() store.getters.doubleCount) // 方法封装 const increment () store.commit(increment) const fetchUser () store.dispatch(fetchUser) // 监听状态变化 watch( () store.state.count, (newCount) { console.log(Count changed:, newCount) } ) // 模块访问示例 const moduleData computed(() store.state.moduleA.data) const updateModuleData () store.commit(moduleA/update, payload) return { count, user, doubleCount, increment, fetchUser, moduleData, updateModuleData } } }关键差异

总结访问方式Options API: 主要通过辅助函数 (mapXxx) 或this.$storeComposition API: 统一通过useStore()返回的 store 实例响应式处理Options API: 辅助函数自动处理响应式Composition API: 需要手动使用computed()包装状态模块访问Options API: 可以使用createNamespacedHelpers或完整路径Composition API: 统一使用完整路径访问代码组织Options API: 按选项 (computed, methods) 组织Composition API: 按功能逻辑组织相关代码集中在一起重要

注意事项Mutation: 必须是同步函数用于状态变更Action: 可以包含异步操作通过提交 mutation 来改变状态Getter: 类似于计算属性会对结果进行缓存响应式: Vuex 4 与 Vue 3 响应式系统完全集成状态变化会自动更新组件Vuex 4 专门为 Vue 3 设计提供了完整的 TypeScript 支持在 Composition API 中尤其强大。

Vuex 4 Store 内部数据流转和 API

总结

核心概念数据流转数据流转方向触发方式使用 API执行内容是否可异步开发者控制典型场景组件 → Action用户交互、组件生命周期dispatch()处理业务逻辑、异步操作、组合多个 mutations是直接调用API 请求、复杂业务逻辑、条件判断Action → MutationAction 内部逻辑commit()提交状态变更请求传递载荷(payload)否间接调用准备数据、验证后提交变更Mutation → StateMutation 执行直接赋值实际修改状态数据否间接控制状态更新、数组操作、对象修改State → Getter状态读取时自动计算getter 函数基于状态派生新数据类似计算属性否定义函数过滤列表、计算统计值、格式化数据Getter → 组件组件访问状态时getters访问提供派生状态给组件使用否读取结果显示处理后的数据、复用复杂逻辑

Store 内部 API 详解API 类别方法名参数格式返回值作用使用限制状态管理state-响应式对象存储应用状态只能通过 mutation 修改变更提交commit(type, payload)

(mutationName, payload)

({ type: mutationName, ...payload })void提交 mutation 同步修改状态必须对应已注册的 mutation动作分发dispatch(type, payload)

(actionName, payload)

({ type: actionName, ...payload })Promise分发 action 处理异步或复杂逻辑返回 Promise可链式调用计算属性getters-各种类型提供基于 state 的计算值必须有返回值模块注册registerModule(path, module)

(path, module)

(path, module, options)void动态注册模块已存在的模块不能被重复注册模块卸载unregisterModule(path)(path)void动态卸载模块不能卸载静态模块状态替换replaceState(state)(state)void替换整个 store 的状态谨慎使用可能破坏响应式插件监听subscribe(callback)(callback)取消订阅函数监听 mutation 提交callback 接收 mutation 和 state动作监听subscribeAction(callback)(callback)取消订阅函数监听 action 分发callback 接收 action 和 state热重载hotUpdate(newOptions)(newOptions)void开发时热更新模块仅用于开发环境

Mutation 与 Action 对比特性MutationAction目的修改状态组合业务逻辑调用方式commit()dispatch()异步性必须同步可以异步返回值无可返回 Promise可追踪性被 Devtools 记录可被 subscribeAction 监听执行顺序同步立即执行可包含异步操作典型用途直接状态变更API 调用、条件逻辑、多个 mutation 组合调试有状态快照有 before/after 钩子

模块内部 API 结构API 类型模块中定义位置访问方式命名空间影响示例state模块选项store.state.moduleName状态自动命名空间化state: { count: 0 }gettersgetters对象store.getters[moduleName/getterName]自动添加命名空间前缀doubleCount(state) { return state.count * 2 }mutationsmutations对象store.commit(moduleName/mutationName)自动添加命名空间前缀increment(state) { state.count }actionsactions对象store.dispatch(moduleName/actionName)自动添加命名空间前缀async fetchData({ commit }) { ... }嵌套模块modules对象多级路径访问路径继承父级命名空间modules: { subModule: { ... } }本地上下文Action 参数{ state, commit, dispatch, getters, rootState, rootGetters }自动提供本地和根上下文actionName(context) { ... }

数据流转示例流程组件触发 ↓ dispatch(fetchUser, userId) // 组件调用 ↓ Action: fetchUser(context, payload) │ → 发起 API 请求 (异步) │ → 处理响应数据 ↓ commit(SET_USER, userData) // Action 内部调用 ↓ Mutation: SET_USER(state, payload) │ → 直接修改 state.user ↓ State 更新 (user 数据变化) ↓ Getter: currentUser(state) 自动重新计算 │ → 基于新 state.user 派生数据 ↓ 组件自动重新渲染 │ → computed 属性获取新值 ↓ 视图更新完成

插件和辅助 APIAPI用途使用时机示例createStore(options)创建 store 实例应用初始化const store createStore({ state, mutations, actions })createLogger(options)创建日志插件开发环境调试plugins: [createLogger()]store.subscribe()监听 mutations日志、持久化store.subscribe((mutation, state) { console.log(mutation.type) })store.subscribeAction()监听 actions性能监控、错误追踪store.subscribeAction({ before: (action) {...}, after: (action) {...} })store.watch()响应式监听状态特定状态变化处理store.watch(state state.user, user { ... })

类型安全的 TypeScript 支持APITypeScript 类型用途示例State类型interface StoreState定义状态结构interface State { user: User; count: number }Getter类型函数类型定义 getter 类型getters: { doubleCount: (state: State) number }Mutation类型函数类型定义 mutation 类型mutations: { [MutationTypes.SET_USER]: (state: State, user: User) void }Action类型函数类型定义 action 类型actions: { [ActionTypes.FETCH_USER]: (context: ActionContext, id: string) Promisevoid }Store泛型StoreState类型化 store 实例const store: StoreState createStore({ ... })

麻豆免费版-麻豆免费版应用