Vuex是一个专为vue.js应用程序开发的状态管理模式。他采用集中式存储来管理应用程序中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到了vue的官网调试工具vue-devtools中，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能
Vuex安装
使用npm安装方式，安装命令如下：
npm install vuex
注意如果报错npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency tree的话要使用下面这个命令，这个报错是因为npm版本太高：
npm install vuex --legacy-peer-deps
在main.js文件中导入Vuex，并安装Vuex插件，代码如下：
import Vuex from 'vuex' Vue.use(Vuex)
import Vuex from 'vuex'是导入vuex
Vue.use(Vuex)是安装Vuex插件
基本用法
Vuex使用单一状态树，用一个对象包含了所有应用层级的状态，作为唯一数据源（single source of truth）而存在，每一个Vuex应用的核心就是store，store可理解为保存应用程序状态的容器
store与普通的全局对象的区别有以下两点：
- Vuex的·状态存储是响应式的。当Vue组件从store中检索状态的时候，如果store中的状态发送变化，那么组件也会相应地得到高效更新
- 不能直接改变store中的状态,改变store中的状态的唯一途径就是显式地提交mutation，这可以确保每个状态更改都留下可跟踪的记录，从而能够启用一些工具来帮助我们更好地理解应用
创建一个store代码如下：
const store=new Vuex.Store({ state:{ count:0 }, mutations:{ increment (state){ state.count++ } } })
state：{}状态数据放到state选项中
mutations：{}选项中第一修改状态的方法 这些方法接收state作为第一个参数
在组件中访问store中的数据可以直接使用store.state.count
在组件中展示store中的状态，使用计算属性来返回store的状态。代码如下：
computed:{ count(){ return this.$store.state.count } }
之后在组件的模板中就可以直接使用count。当store中的count发送改变时，组件内的计算属性count也会同步发生改变
更改store状态要遵照Vuex的要求：通过提交mutation来更改store中的状态。在严格模式下如果store中的状态改变不是由mutation函数引起的，则会抛出错误，而且如果直接修改store中的状态，Vue的调试工具也无法跟踪状态的改变，在开发阶段可以启用严格模式，以避免直接的状态修改，在创建store的时候，传入strict：true。代码如下：
const store = new Vuex.Store({ strict:true, state: { count: 0 }, mutations: { increment(state) { state.count++ } } })
Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型和一个处理器函数，这个处理器函数就是实际进行状态更改的地方，他接收state作为第一参数，
我们不能直接调用一个mutation处理器函数，mutation选项更像是事件注册，当触发一个类型为increment的mutation时，调用此函数要调用一个mutation处理器函数，需要用他的类型去调用store。commit方法，代码如下：
store.commit("increment")
作者：xiao_kai
链接：https://juejin.cn/post/7112403250837471263
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
