【vue】一文搞懂vuex的基本用法

个人对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只是定义了另外一种引用方式，避免每次写长的表达式，

用哪种方式，看个人喜好！