vuex 的使用 mapState, mapGetters, mapMutations, mapActions

时间 2019-11-09 标签 vuex 使用 mapstate mapgetters mapmutations mapactions

state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之能够异步。
modules => 模块化Vuexjavascript

export default{
      state: {
          count:5
      },
      getters: {
           // 单个参数
            countDouble: function(state){
                return state.count * 2
            },
            // 两个参数
            countDoubleAndDouble: function(state, getters) {
                return getters.countDouble * 2
            }
      },
      mutations: {
          //无提交荷载
        increment(state) {
            state.count++
        }
        //提交荷载
        incrementN(state, obj) {
          state.count += obj.n
        }
      },
      actions: {
          increment (context) {
              setInterval(function(){
                context.commit('increment')
              }, 1000)
        }
      }

<template>
    <div class="p-genDan">
    	<p>{{ $store.state.count }}</p><!--state第一种使用方法，直接使用-->
    	<p>{{ count }}</p> <!--state第二种方式-->
    </div> 
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions  } from 'vuex';
export default {
    name: 'genDan',
	data() {
		return {};
	},
	beforeCreate() {},
	created() {},
	beforeMount() {},
	mounted() {
		//mutations调用 第一种形式
		//无提交荷载
		 this.$store.commit('increment')
		//提交荷载
		this.$store.commit('incrementN', {n: 100})
		//对象风格的提交方式
        this.$store.commit({ type: 'incrementN', n: 10})
        
        //mutations调用 第二种形式
        this.increment();
        this.add();
        
        //Action 经过 store.dispatch 方法触发：
        this.$store.dispatch('increment')
		// 以载荷形式分发
        this.$store.dispatch('incrementN', {n: 10})
		// 以对象形式分发
		this.$store.dispatch({type: 'incrementN',n: 10})
		//Action经过 mapActions
		this.incrementN();
	},
	computed: {
		...mapState({
			count: state => state.count,  //state第二种使用方法
			// 传字符串参数 'count' 等同于 `state => state.count`
    		     countAlias: 'count',
		    // 为了可以使用 `this` 获取局部状态，必须使用常规函数
		    countPlusLocalState (state) { //state的从新筛选，当前组件有效
		      return state.count + 10
		    }
		}),
		//getters调用第一种调用方式
		countDouble: function(){
            return this.$store.getters.countDouble
        },
        countDoubleAndDouble: function(){
            return this.$store.getters.countDoubleAndDouble
        },
        //getters第二种调用方式
        //使用对象展开运算符将 getters 混入 computed 对象中
	    ...mapGetters([
	      'countDouble',
	      'countDoubleAndDouble',
	      //若是你想将一个 getter 属性另取一个名字，使用对象形式： 映射 this.double 为 store.getters.countDouble
  		  double: 'countDouble'
	      //..
	    ])

	},
	methods: {
		//mutations调用 第二种形式
		...mapMutations([
	      'increment' // 映射 this.increment() 为 this.$store.commit('increment')
	    ]),
	    ...mapMutations({
	      add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
	    }),
	    
	    //mapActions
	    ...mapActions([
	      'incrementN' //映射 this.incrementN() 为 this.$store.dispatch('incrementN')
	    ]),
	    ...mapActions({
	      add: 'incrementN' //映射 this.add() 为 this.$store.dispatch('incrementN')
	    })
	},
	beforeUpdate() {},
	updated() {},
	beforeDestroy() {},
	destroyed() {}
};
</script>