vuex 学习指南前言先大致讲一下vuex的设计理念，再从语法、语义、语用详细介绍。 vuex的设计理念它提供了一个

前言

先大致讲一下vuex的设计理念，再从语法、语义、语用详细介绍。

vuex的设计理念

它提供了一个集中式存储、管理应用所有组件的状态的能力，这个状态管理系统由状态、视图、操作三部分组成，状态映射到视图，视图提供操作界面，用户操作改变状态，形成“单向数据流”的完美闭环。

vuex会对状态以及操作进行统一声明，然后以插件的形式引入到vue使用，最后在需要的地方能调用这些状态和操作。

State和Getter选项用于声明响应式状态，Mutation和Action选项用于声明操作函数，还有Module选项用于分割模块（应用复杂时，代码会变得臃肿，划分模块有利于维护）。

语法

创建Store
- createStore()：创建一个 store 实例
构造器选项
- state：Vuex store 实例的根 state 对象
- getters：在 store 上注册 getter，getter 方法接受以下参数：state、getters
- mutations：在 store 上注册 mutation，处理函数总是接受 state 作为第一个参数（如果定义在模块中，则为模块的局部状态），payload 作为第二个参数
- actions：在 store 上注册 action，处理函数总是接受 context 作为第一个参数，如果有第二个参数 payload 的话也能够接收，context 对象包含以下属性：state、getters、commit、dispatch、rootState、rootGetters
- modules：包含了子模块的对象，会被合并到 store
- plugins：一个数组，包含应用在 store 上的插件方法，这些插件直接接收 store 作为唯一参数
- strict：使 Vuex store 进入严格模式，在严格模式下，任何 mutation 处理函数以外修改 Vuex state 都会抛出错误
- devtools：为某个特定的 Vuex 实例打开或关闭 devtools，对于传入 false 的实例来说 Vuex store 不会订阅到 devtools 插件，对于一个页面中有多个 store 的情况非常有用
Store实例
- state：根状态，只读
- getters：暴露出注册的 getter，只读
- commit()：提交 mutation
- dispatch()：分发 action
- replaceState()：用于完全替换整个 Vuex store 的 state 状态树
- watch()：允许响应式地观察 store 中 state 或 getter 的变化，并在变化时执行回调函数，类似于 Vue 实例的 $watch，但专门针对 Vuex store 的状态
- subscribe()：订阅 store 的 mutation，handler 会在每个 mutation 完成后调用，接收 mutation 和经过 mutation 后的状态作为参数，返回一个 unsubscribe 函数，当不再需要订阅时应该调用该函数
- subscribeAction()：订阅 store 的 action，handler 会在每个 action 分发时调用，接收 action 和当前 store 的 state 作为参数，返回一个 unsubscribe 函数，当不再需要订阅时应该调用该函数
- registerModule()：允许在创建 store 之后动态注册模块
- unregisterModule()：卸载一个动态模块
- hasModule()：检查该模块的名字是否已经被注册
- hotUpdate()：热替换新的 action 和 mutation
辅助函数
- useStore()：在 setup 钩子函数中调用该方法可以获取注入的 store
- mapState()：为组件创建计算属性以返回 Vuex store 中的状态
- mapGetters()：为组件创建计算属性以返回 getter 的返回值
- mapMutations()：创建组件方法提交 mutation
- mapActions()：创建组件方法分发 action
- createNamespacedHelpers()：创建基于命名空间的组件绑定辅助函数，为了不想调用模块内容时都写一遍完整的路径，可以使用该函数简化

语义

State

Vuex 的状态存储是响应式的，改变 store 中的状态的唯一途径就是显式地提交 mutation。

Getter

可以认为是 store 的计算属性。

Mutation

更改 store 中的状态的唯一方法，非常类似于事件：每个 mutation 都有一个字符串的事件类型和一个回调函数。

mutation 必须同步执行。

Action

action 可以执行异步操作，但不能直接修改state，可以通过提交 mutation 间接修改。

Module

默认情况下，模块内部的 action 和 mutation 仍然是注册在全局命名空间的，如果希望模块具有更高的封装度和复用性，可以通过添加 namespaced: true 使其成为带命名空间的模块。

如果希望在带命名空间的模块内访问全局内容，rootState 和 rootGetters 会作为第三和第四参数传入 getter，context 对象的属性会传入 action，{ root: true } 作为第三参数可以传给 commit 或 dispatch。

语用

当遇到跨组件、多层级、持久化状态的场景时，使用 Vuex 可显著提升代码可维护性和数据可靠性。

总结

以上就是我关于vuex知识的所有理解与归纳，vuex是一个重要的库，几乎每个vue项目都会用到vuex。

虽然目前新的替代方案pinia出现了，但很大部分项目依然使用的是vuex。