store.commit({
type: 'changeLoading',
isLoading: true
})
4.mutation-types.js
在需要多人协作的项目中，我们可以使用常量代替mutation 事件类型。这在各种 Flux 实现中是很常见的模式。同时把这些常量放在单独的文件中可以让协作开发变得清晰。
// mutation-types.js
export const CHANGE_LOADING= 'CHANGE_LOADING'
// mutation.js
import { CHANGE_LOADING} from './mutation-types'
export default{
[CHANGE_LOADING](state,payload){
state.isLoading = payload.isLoading
},
}
对于定义mutation-type里面的事件类型，我大致遵循我自己定义的如下规范：
1、因为mutation类似于事件，所以以动词开头
2、单词间以下划线进行连接
3、保存到vuex里面的状态用RECORD标识
4、缓存到本地的状态用SAVE标识
当然，这个规范的话大家可以自己定义，只要能通过mutation-type就能知道mutation的意图就是极好的。
5.Getter（getter.js）
有时候我们需要从 store 中的 state 中派生出一些状态，例如我上面提到的需要在异步请求的时候去显示一个带有遮罩层的loading，然后我loading的下面需要根据state去展示loading的状态。在不使用getter的情况下，我们会选择使用计算属性去处理。
computed: {
loadingTxt () {
return this.$store.state.isLoading ? '加载中' : '已完成';
}
}
但是，我们这个loading需要在很多的组件中去使用它。那么，我们要么复制这个函数，要么抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
如果使用Getter，那么一切都变得美好了。
//getter.js
export default {
loadingTxt:(state) =>{
return state.isLoading ? '加载中' : '已完成';
}
};
就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
并且，Getter 也可以接受其他 getter 作为第二个参数：
export default {
loadingTxt:(state) =>{
return state.isLoading ? '加载中' : '已完成';
},
isLoading:(state,getters) => {
return 'string' === typeof getters.loadingTxt ? true : false;
}
};
通过mapGetters辅助函数可以将 store 中的 getter 映射到局部计算属性
//组件中
import { mapGetters } from 'vuex'
export default {
data(){
return {
//...
}
},
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'loadingTxt',
'isLoading',
// ...
])
}
}
6.Action（action.js）
action的功能和mutation是类似的，都是去变更store里的state，不过action和mutation有两点不同：