vuex2.0 關於 狀態管理state getter mutation 和action

Vuex 狀態管理 1 State 三種狀態用法

A.直接獲取Store中的State 屬性的值
		 
		  Computed:{  // 計算屬性
		        Count (){
				   Return This.$Store.State.Count
				}
		  }
		  
		  b.直接從mapState中獲取
		  
		     computed:{
			     ...mapState(['count'])      <===>  等同上面的直接獲取store中state中的屬性值
			 }
			 
		 c.在mapState中定義別名
		      computed:{
			       ...mapState({
				      count:(state) = state.count
				   })
			  }
			  
			  
		以上三種均可以獲取當前state中對應的參數值 注意在引用以前咱們必須須要引入 
		
		
		import {mapState,mapGetters,mapMutations} from 'vuex'
		
2 getter 獲取計算後的state 屬性的值 // getter 只是針對的是state裏面的參數

        列如 從store的getters中獲取到firstNmme 和 lastName 屬性 在getter中展現
		
		       fullName (state) {
                  return `${state.firstName}+${state.lastName}`
                }
				
		  computed :{
		     fullName () {
				return this.$store.getters.fullName
			  }
		  }
		  
	    mapGetters 中獲取 
		   computed:{
		       ...mapGetters(['fullName'])
		   }
		   
3 mutation 更改state
     updateCount (state,{num}) {
	  state.count = num
 }
	
使用store 的commit 觸發mutation 
  mounted (){
  setInterval(()=>{
     this.$store.commit('updateCount',{num:num++})
  },1000)
 }
使用mapMutations 
   methods:{
      ...mapMutations(['updateCount'])
   }
   
   此時ubdateCount的用法 
     mounted(){
	   setInterval (()=>{
	      this.updateCount ({num:num++})
		  
	   },1000)
	 }
	 
	 使用mapMutations 的說法
	     methods:{
		       ...mapMutations(['ubdateCount'])
		 }
4 action異步修改state   
      // action.js
     updateCountAsync (store, data) {
	  setTimeout(() => {
		store.commit('updateCount', {num: data.num})
	  }, data.time)
	}
使用store的dispatch 觸發action
  mounted (){
     this.$store.dispatch('updateCountAsync',{num:3,time:2000})
  }
  使用mapActions methods:{
     ...mapActions(['updateCountAsync]);
  }
  此時updateCountAsync的用法
	mounted () {
  this.updateCountAsync({
	num: 3,
	time: 2000
  })
}

5 能夠直接引入stroe.js 中導入

import Vuex from 'vuex'
import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'
import actions from './action/action'

const isDev = process.env.NODE_ENV === 'development'

export default () => {
  return new Vuex.Store({
	strict: isDev,
	state: defaultState,
	mutations,
	getters,
	actions
  })
}