vuex 的使用 mapState, mapGetters, mapMutations, mapActions

state => 基本數據
getters => 從基本數據派生的數據
mutations => 提交更改數據的方法，同步！
actions => 像一個裝飾器，包裹mutations，使之能夠異步。
modules => 模塊化Vuex

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>