Vuex狀態管理入門看完這篇就會了

一、Vuex概述

1. 概念

   ​ Vuex是實現組件全局狀態（數據）管理的一種機制，可以方便的使用組件之間數據的共享。在組件的外部定義了一個全局的空間STORE用來存儲數據，所有組件都可以訪問這些數據，不需要複雜的數據傳遞。

2. 優點

   • 能夠在vuex中集中管理共享的數據，易於開發和後期維護。
   • 能夠高效地實現組件之間的數據共享，提高開發效率。
   • 存儲在vuex中的數據都是響應式的，能夠時時保持數據與頁面的同步。

3. 什麼數據適合存儲到Vuex中

   一般情況下，只有組件之間共享的數據纔有必要存儲到vuex中。

二、Vuex的基本使用

1. 安裝vuex依賴包

npm install vuex --save

2. 導入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

3. 創建store對象

const store = new Vuex.Store({
	//state中存放的就是全局共享的數據
	state:{count:0}
})

4. 將store對象掛載到vue實例中

new Vue({
	el:'#app',
	render:h=>h(app),
	router,
	
	//將創建的共享數據對象，掛在到Vue實例中
	//所有的組件。就可以直接從store中獲取全局的數據了
	store
})

三、Vuex的核心概念

1. State：提供唯一的公共數據源，所有共享的數據都要統一放到Store的State中存儲。

const store = new Vue.Store({
	//state中存放的就是全局共享的數據
	state:{count:0}
})

組件訪問State中數據的第一種方式：

this.$store.state.全局數據名稱

組件訪問State中數據的第二種方式：

（1）從vuex中按需引入mapState函數

import {mapState} from 'vuex'

（2）通過剛纔導入的mapState函數，將當前組件需要的全局數據，映射爲當前組件的computed計算屬性：

computed:{
	...mapState(['count'])
}

2. Mutation：用於變更Store中的數據

   （1）只能通過mutation變更Store數據，不可以直接操作Store中的數據。

   （2）通過這種方式雖然操作起來稍微頻繁一些，但是可以集中監控所有數據的變化。

   （3）不要在mutations函數中，執行異步操作

//定義Mutation
const store = new Vuex.Store({
	state:{
		count:0
	},
	mutations:{
		//step是傳遞的參數，可選
		add(state,step){
			state.count++
		}
	}
})

//觸發mutation,第一種方式
methods:{
	handle(){
		//如果要傳遞參數，加在後面，用逗號分隔
		this.$store.commit('add',3)
	}
}

//觸發mutation，第二種方式
(1)導入mapMutations函數
import {mapMutations} from 'vuex'

(2)將指定的mutations函數，映射爲當前組件的methods函數
methods:{
	...mapMutations(['add','addN'])
}

3. Action：用於處理異步任務。如果通過異步操作變更數據，必須通過Action，而不能用Mutation，但是在Action中還是要通過觸發Mutation的方式間接變更數據。

//定義Action
const store = new Vuex.Store({
	//...省略其他代碼
	mutations:{
		add(state,step){
			state.count++
		}
	},
	actions:{
		//第二個是調用時需要傳遞的參數，可選
        addAsync(context,step){
			setTimeout(()=>{
				//不能直接修改state中的數據，必須通過mutation
				context.commit('add'，step)
			},1000)
        }
	}
})

//觸發Action,第一種方式
methods:{
	handle(){
		//如果調用的方法有參數要傳遞，寫在後面用逗號隔開
		this.$store.dispatch('addAsync',5)
	}
}

//觸發Action，第二種方式
（1）導入mapActions函數
import {mapActions} from 'vuex'

（2）
methods:{
	...mapActions(['subAsync']),
}

4. Getter：用於對Store中的數據進行加工處理形成新的數據。

（1）Getter可以對Store中已有的數據加工處理之後形成新的數據，類似Vue的計算屬性。

（2）Store中數據變化後，Getter的數據也會跟着變化。

//定義Getter
const store = new Vuex.Store({
	state:{
		count:0
	},                                      
	getters:{
		showNum:state=>{
			return '當前最新的數量是'+state.count
		}
	}
})

//使用Getter，第一種方式
this.$store.getters.名稱

//使用Getter，第二種方式
import {mapGetters} from 'vuex'
computed:{
	...mapGetters(['showNum'])
}