原创

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

用哪种方式,看个人喜好!

原创
vue

评论