个人对vuex的理解是,state中定义的变量类似java中的全局变量,将各组件用到的变量集中起来,统一管理,而getter,mutation,action就是针对这些全局变量的查询和更新函数
作用:全局变量存放的地方,可以是一个字符串、数据、对象等
定义:
export default new Vuex.Store({
state:{
count:0,
price:0,
metaInfo:{
title:"这是一个标题",
keywords:"vuex,vue.js,vue-router",
}
}
})
作用:相当于计算属性
定义:
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 都是这个思路
作用:用于定义改变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里面
作用:将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只是定义了另外一种引用方式,避免每次写长的表达式,
用哪种方式,看个人喜好!
评论