vuex的核心概念

State

State提供唯一的公共資料來源， 所有共享的資料都要統放到Store的State中進行儲存。

//建立store資料來源， 提供唯一公 共資料
const store = new Vuex. Store ({
	state:{ count: 0 }
	})

元件訪問State中資料的第一種方式:

this.$store. state.全域性資料名稱

元件訪問State中資料的第二種方式:

// 1.從vuex 中按需匯入mapState 函式
import { mapState} from 'vuex'

通過剛才匯入的mapState函式,將當前元件需要的全域性資料，對映為當前元件的computed計算屬性:

// 2.將全域性資料，對映為當前元件的計算屬性
computed:
. . .mapState([ 'count! ])
}

Mutation

Mutation於變更Store中的資料。
①只能通過mutation變更Store資料,不可以直接操作Store中的資料。
②通過這種方式雖然操作起來稍微繁瑣-些,但是可以集中監控所有資料的變化。

// 定義Mutation
const store = new Vuex. Store({
	state: {
	count: 0
}，
mutations: {
	add(state) {
	//變更狀態
	state . count++
})

//觸發mutation
methods:{
	handle1() {
	//觸發mutations 的第一種方式
	this.$store . commit('add' )
	}
}
 

可以在觸發mutations時傳遞引數:

//定義Mutation
const store = new Vuex. store ( {
	state: {
		count: 0
	},
	mutations: {
		addN(state, step) {
		//變更狀態:
		state .count += step
		}
})

//觸發mutation
methods: {
	handle2() {
	//在呼叫commit函式，
	//觸發mutations時攜帶引數
		this.$store . commit('addN', 3)
	}
}

this. $store.commit是觸發mutations的第一種方式，觸發mutations的第二種方式:

// 1.從vuex 中按需匯入mapMutations 函式
import { mapMutations } from 'vuex'

通過剛才匯入的mapMutations函式，將需要的mutations函式,對映為當前元件的methods方法:

// 2.將指定的mutations 函式，對映為當前元件的methods 函式
methods :{
...mapMutations(['add', 'addN'])}

Action

觸發actions非同步任務時攜帶引數:

//定義Action
const store = new Vuex. Store ({
//...省略其他程式碼
	mutations: {
		addN(state, step) {
		state.count += step
		}
	},
	actions: {
		addNAsync(context, step) {
			setTimeout( () => {
			context .commit('addN', step)
			}, 1000)
		}
	}
})

//觸發Action
methods:{
	handle() {
	//在呼叫dispatch函式，
	//觸發actions 時攜帶引數
	this. $store .dispatch ( 'addNAsync', 5)
	}
}

this. $store.dispatch0是觸發actions的第一種方式， 觸發actions的第二種方式:

// 1.從vuex中按需匯入mapActions 函式
import { mapActions } from 'vuex '

通過剛才匯入的mapActions函式,將需要的actions函式，對映為當前元件的methods方法:

// 2.將指定的actions 函式，對映為當前元件的methods 函式
methods: {
...mapActions([ 'addASync'，'addNASync'])}

Getter

Getter用於對Store中的資料進行加工處理形成新的資料。
①Getter 可以對Store中已有的資料加工處理之後形成新的資料，類似Vue的計算屬性。
②Store 中資料發生變化，Getter 的資料也會跟著變化。

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

使用getters 的第一種方式:

this.$store.getters.名稱

使用getters的第二種方式:

import  { mapGetters } from 'vuex '
computed:{
...mapGettersT[ ' showNum'] )}