Vuex详解

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)

特点：
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

简单的例子

store组成对象
state：存储状态。也就是变量；

getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多；

mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit(‘SET_AGE’, 18)。和vue中的methods类似

actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch(‘nameAsyn’)。

modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。
state
用来存储对象
state = {
name: ‘weish’,
age: 22
};
调用方式 store.state;或者this.$state.state来去store中的值
getters
在Store仓库里，state就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据，比如饼状图组件和曲线图组件，我们是否可以把这个数据抽提出来共享？这就是getters存在的意义。我们可以认为，【getters】是store的计算属性。
getters可以通过属性访问也可以通过方法访问，可在通过store在外部访问，也可以通过getters参数在其他的getters里面掉用
…mapGetters表示// 使用对象展开运算符将 getters 混入 computed 对象中
mutations
通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。切记：Vuex中store数据改变的唯一方法就是mutation！
提交载荷（Payload）
简单的理解就是往handler(state)中传参handler(state,pryload)；一般是个对象。
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
store.commit(‘increment’, {
amount: 10
})
第一个参数对象为state对象,第二个对象为需要修改的属性值，以对象的形式传过来，并且mutations不能处理异步修改，通过commit方式调用
action
action 和mutions 的定义方法是类似的，我们要dispatch 一个action, 所以actions 肯定有一个名字，dispatch action 之后它要做事情，就是commit mutation, 所以还要给它指定一个函数。因为要commit mutation ,所以 函数也会自动获得一个默认参数context, 它是一个store 实例，通过它可以获取到store 实例的属性和方法,如 context.state 就会获取到 state 属性， context.commit 就会执行commit命令
actions: {
increment({commit}){
commit(“INCREMENT”)
},
decrement({commit}){
commit(“DECREMENT”)
}
}
调用方式通过dispatch来派发事件，在actions中可以执行异步事件，所以说在action中可以用来处理乱七八糟的各种业务逻辑
…mapActions 可以用来把store中映射到其他组件中道理通mapgetters