1、 mutation用来同步数据做业务的处理 (vuex中store数据改变唯一的方法就是mutation),mutation不能是异步最主要的就是为了 调试,而不是不能修改状态;
2、action处理异步数据最终提交到数据库,提交的是 mutation,Action 可以包含任意异步操作,而不是直接变更状态。
3、Actions 支持同样的载荷方式和对象方式进行分发:
// 以载荷形式分发
store.dispatch('incrementAsync', {
amount: 10
})
// 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})
4、mapState 作用:当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余,们可以使用 mapState 辅助函数帮助我们生成计算属性,
computed: mapState({
count: 'count', // 第一种写法
sex: (state) => state.sex, // 第二种写法
from: function (state) { // 用普通函数this指向vue实例,要注意
return this.str + ':' + state.from
},
// 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
// from: (state) => this.str + ':' + state.from
myCmpted: function () {
// 这里不需要state,测试一下computed的原有用法
return '测试' + this.str
}
}),
代码示例来源:闲人王昱珩
也可以使用ES6中的扩展运算符”…”,【不知道扩展运算符的朋友可自行百度】
computed:{
...mapState(['count','info']),
// count(){
// return this.$store.state.count
// },
// info(){
// return this.$store.state.info
// }
},
5、mapMutations/mapActions是把mutation/action函数绑定到methods里面,调里面的方法时正常传参数。
6、部署之前需要在“config/index.js/ assetsPublicPath: ‘/’ ”,里修改服务器路径配置。
7、“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算;
参数: 接受 state 作为其第一个参数;也可以接受其他 getter 作为第二个参数;
注意,getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的;getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:
不断update。。。