个人对vuex的理解是，state中定义的变量类似java中的全局变量，将各组件用到的变量集中起来，统一管理，而getter,mutation,action就是针对这些全局变量的查询和更新函数
- state
作用：全局变量存放的地方，可以是一个字符串、数据、对象等
定义：
export default new Vuex.Store({
state:{
count:0,
price:0,
metaInfo:{
title:"这是一个标题",
keywords:"vuex,vue.js,vue-router",
}
}
})
- getter
作用：相当于计算属性
定义：
export default new Vuex.Store({
state:{
count:0,
price:0,
metaInfo:{
title:"这是一个标题",
keywords:"vuex,vue.js,vue-router",
}
},
getters:{
getMoney: function(state){
return state.count * state.price
},
getMoney2: function(state){
return state.count * state.price
},
}
})
引用：
常规方式：
this.$store.getters.getMoney
mapGetters方式,有2种方式
1.使用对象的方法引用,这里可以同时引用多个
-
...mapGetters({getMoneyFromState : 'getMoney',getMoneyFromState2 : 'getMoney2'}), .... this.getMoneyFromState //使用时这样调用2.使用名称的方法引用
...mapGetters(['getMoney','getMoney2']) // ... this.getMoney //使用时这样调用
1和2的效果是一样的
说白了，mapGetter只是提供了一种引用方式而已，避免每次引用写那么长的表达式
mapActions,mapMutations 都是这个思路
- mutation
作用：用于定义改变state中变量的方法，毕竟直接调用的方式不是太优雅
定义：
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0,
price: 5.5,
metaInfo: {
title: "这是一个标题",
keywords: "vuex,vue.js,vue-router"
}
},
mutations: {
updatePrice(state,price){
state.price = price;
},
updateCount(state,count){
state.count = count
}
}
})
每一个mutation方法带两个参数,state和入参，mutation必须同步执行
常规调用方法：
this.$store.commit("updatePrice", val);
使用mapMutations方式：
export default {
methods:{
...mapMutations([
'updatePrice',
'updateCount'
]),
//使用时直接按方法调用即可
inputPrice(price){
this.updatePrice(price);
}
}
}
mutation是方法，所以这里要集成到methods里面
- action
作用：将mutation里面处理数据的方法变成可异步执行的方法，一个action中可调用多个mutation方法
定义：
export default new Vuex.Store({
state: {
count: 0,
price: 5.5,
metaInfo: {
title: "这是一个标题",
keywords: "vuex,vue.js,vue-router"
}
},
getters:{
getMoney: function(state){
return state.count * state.price
},
getMoney2: function(state){
return state.count * state.price
}
},
mutations: {
updatePrice(state,price){
state.price = price;
},
updateCount(state,count){
state.count = count
},
actions: {
updateOrderInfo(context,info)
{
context.commit('updatePrice',info.price);
context.commit('updateCount',info.count);
}
},
modules: {}
});
引用：
import {mapActions } from 'vuex'
methods:{
...mapActions(['updateOrderInfo']),
inputPrice(){
this.updatePrice(this.price);
this.$store.state.price ;
},
getMyMoney(){
this.updateOrderInfo({price:this.price,count:this.count});
},
getMyMoney2(){
this.$store.dispatch('updateOrderInfo',{price:this.price,count:this.count});
}
}
常规方式,利用dispatch
this.$store.dispatch('updateOrderInfo',{price:this.price,count:this.count});
mapAction方式：
this.updateOrderInfo({price:this.price,count:this.count});
- 总结
state:用于定义全局变量
getter:将state封装成计算属性，便于获取全局变量
mutation:定义改变state中全局变量的方式，这些方法都是同步的
action：定义改变state的异步方法
state,getter,mutation,action 都可以通过常规的this.$store来直接引用
mapGetters，mapActions，mapMutations只是定义了另外一种引用方式，避免每次写长的表达式，
用哪种方式，看个人喜好！
