Vuex核心知識（2.0）

轉(zhuǎn)自：http://www.cnblogs.com/ghost-xyx/p/6380689.html

Vuex 是一個專門為 Vue.js 應(yīng)該程序開發(fā)的狀態(tài)管理模式，它類似于 Redux 應(yīng)用于 React 項目中，他們都是一種 Flux 架構(gòu)。相比 Redux，Vuex 更簡潔，學(xué)習(xí)成本更低。希望通過本文幫助還沒使用 Vuex 的同學(xué)快速上手。

注：本文針對 Vuex 2.0 的語法，目前通過 npm 默認(rèn)下載的版本為 1.0+ ，想引入 2.0 版本可以通過 script 標(biāo)簽引入。

<script src="https://unpkg.com/vuex@2.0.0"></script>

習(xí)慣使用 ES6 中 import 方法的可以暫時通過解構(gòu)賦值的方式引入 Vuex 中的方法。

import { mapState, mapGetters } from 'Vuex'; //替換為： let { mapState, mapGetters } = Vuex;

?

Vuex 的核心內(nèi)容主要就是 State、Getters、Mutations、Actions 這四部分，也非常好理解。

State

首先看如何申明一個 store

import Vue from 'Vue'; import Vuex from 'Vuex';Vue.use(Vuex);let store = new Vuex.Store({state: {stateA: 'a',stateB: 'b', stateC: 'c' } }); console.log(store.state.stateA); // a

在 store 中的 state 對象，可以理解為 Vue 實例中的 data 對象，它用來保存最基本的數(shù)據(jù)。

在 Vue 中獲取 store 中的狀態(tài)

let app = new Vue({
　　 el: '#demo',template: `<h1>{{myState}}</h1>`, computed: {myState() {return store.state.stateA;}} });

最簡單的方式就是通過 Vue 中的計算屬性(computed) 來將 store 中的狀態(tài)映射為 Vue 的數(shù)據(jù)。但是當(dāng)數(shù)據(jù)多時這種方法明顯效率過低，所以 Vuex 中提供了 mapState 方法用于批量映射 store 中的狀態(tài)。

首先必須在 Vue 中注冊 store 選項，這樣整個 store 就從根節(jié)點注冊到 Vue 下的每一個子組件里了。?

import { mapState } from 'Vuex';let app = new Vue({
el: '#demo',
store,data: {local: 'L'},computed: mapState({stateA: state => state.stateA,stateB: 'stateB', stateC(state) { return state.stateC + this.local; } }) });

上例中，a. 可以通過 ES6 中的箭頭函數(shù)進(jìn)行數(shù)據(jù)的映射，b. 當(dāng)計算屬性的名稱與 state 的屬性名一致時可能直接通過字符串賦值，c. 當(dāng)需要引用上下文中的 data 屬性實，只能通過常規(guī)函數(shù)來使 this 生效。

如果所有計算屬性的名稱都與 state 一致，可以在 mapState 中以數(shù)組的方式進(jìn)行映射。如果 Vue 中已經(jīng)存在計算屬性，可以通過 ES6 的展開操作符 (...) 進(jìn)行組合。

let app = new Vue({el: '#demo',
store,computed: {local() {return 'Local';},...mapState(['stateA', 'stateB', 'stateC']) } });

?

Getters

當(dāng)需要對 store 中的數(shù)據(jù)進(jìn)行處理，或者需要對處理后的數(shù)據(jù)進(jìn)行復(fù)用，就可以使用 Getters 來處理，Getters 也可以理解為 Vue 中的計算屬性 (computed)。

let store = new Vuex.Store({state: {nowDate: new Date()},getters: {dateFormat(state, getters) {let date = state.nowDate;return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} / ${date.getHours()}:${date.getMinutes()}`; } } });

console.log('The time is now:', store.getters.dateFormat); // The time is now: 2017-2-10 / 17:28

getters 接收兩個參數(shù)，1. state、2. getters 本身，可以引用其他 getters。與 mapState 類似，Getters 也擁有 mapGetters 方法，用于批量映射。

let { mapGetters } from 'Vuex';let comonent = {computed: {...mapGetters(['nowDate'])} };

?

Mutations

在 Vue 中，data 值是可以直接被更改的。但是在 Vuex 中，不能直接對 state 進(jìn)行操作，唯一的方法就是提交 mutation。mutation 可以理解為 Vue 中的 method 事件，只不過調(diào)用 mutation 需要特別的方法。

let store = new Vuex.Store({state: {count: 0},mutations: {addCount(state) {state.count ++;}} });store.commit('addCount');console.log(store.state.count); // 1

每一個 mutation 都有一個字符串的事件類型和一個回調(diào)函數(shù)。通常在回調(diào)函數(shù)中進(jìn)行狀態(tài)更改，通過 store.commit 觸發(fā)事件。?

傳參

// ... mutations: {addCount(state, n) {state.count += n;} }store.commit('addCount', 10);

?這種方式有一個問題，一旦參數(shù)多了，就必須保證傳入的順序不能出錯，可讀性也很低。所以通常將參數(shù)以對象的形式傳入，同時 mutaion 的事件類型字符串也可以使用對象的形式傳入。

// ... mutations: {addCount(state, params) {state.count += params.num;} }store.commit('addCount', {num: 10 }); store.commit({ type: 'addCount', num: 10 });

這里有一個規(guī)則需要遵守，在 mutation 中更改 state 應(yīng)該以新對象替換老對象，不要在直接原對象上直接修改。*熟悉 React 的朋友們應(yīng)該知道，在使用 setState 更新狀態(tài)時也是同樣的規(guī)則。

通過 ES6 的展開操作符可以很容易的完成。

state.obj = { ...state.obj, newState: 123 };

在 Vue 組件中提交 mutaion

this.$store.commit('xxx');

在組件中可以通過上述方法提交 commit，不過 Vuex 提供了?mapMutations 方法用于將 mutation 映射到組件中的 method 中。與 mapState、mapGetters 相似，這里就不再贅述了。

import { mapMutations } from 'vuex'const component = {// ... methods: {...mapMutations(['addCount' // 映射 this.addCount() 為 this.$store.commit('addCount') ]), ...mapMutations({ add: 'addCount' // 映射 this.add() 為 this.$store.commit('addCount') }) } }?

mutation 必須是同步函數(shù)

我們先試著寫一個異步的 mutation ，看看會發(fā)生什么。

// ... mutations: {asyncAdd(state) {setTimeout(() => {state.count ++;}, 2000); } } store.commit('asyncAdd');

經(jīng)測試，在 mutaion 里進(jìn)行異步操作也是會生效的，2秒之后 state.count 確實發(fā)生改變。

那為什么還要強(qiáng)調(diào) mutation 必須是同步的呢？因為在觸發(fā) commit 之后，回調(diào)函數(shù)還沒有被調(diào)用，所以這次 mutation 的修改也是無法被調(diào)試工具所記錄的。

如何對 state 進(jìn)行異步操作呢，就要使用下面的 Action 了。

?

Actions

Action 類似于 mutation，不同在于：

1. Action 不直接更改狀態(tài)，而是提交 mutation

2. Action 可以包含任何異步操作

const store = new Vuex.Store({state: {count: 0},mutations: {addCount(state) {state.count ++;}},actions: {asyncAdd(context) {setTimeout(() => {context.commit('addCount'); }, 2000); } } })

Action 中的回調(diào)函數(shù)會接收一個上下文 context 對象，它包含了當(dāng)前 store 中所有屬性和方法，但其不是 store 本身。你可以通過 context.commit 來提交 mutation，也可以通過 context.state 與 context.getters 來獲取 state 和 getters。

當(dāng)需要多次調(diào)用 commit 時，可以使用 ES6 的語法對傳入的參數(shù)進(jìn)行解構(gòu)。

// ... actions: {asyncAdd({ commit }) {commit('addCount');} }?

分發(fā) Action 與傳參

Action 是通過 store.dispatch 方法來觸發(fā)，傳參方式與 store.commit 類似。

store.dispatch('asyncAdd');store.dispatch('asyncAdd', {num: 10 });store.dispatch({type: 'asyncAdd',num: 10 });

在 Vue 組件中分發(fā) Action

this.$store.dispatch('xxx');

可以使用上述方式，同時 Vuex 中也提供了 mapActions 方法用于批量映射于組件中的 methods 中，與 mapMutations 類似。

import { mapActions } from 'vuex'const component = {// ... methods: {...mapActions(['asyncAdd' // 映射 this.asyncAdd() 為 this.$store.dispatch('asyncAdd') ]), ...mapActions({ add: 'asyncAdd' // 映射 this.add() 為 this.$store.dispatch('asyncAdd') }) } }

組合 Actions

既然 Action 是異步行為，那我們可以使用 ES6 中的 Promise 對象進(jìn)行組合。

const store = {actions: {asyncActionA({ commit }) {return new Promise((resolve, reject) => {setTimeout(() => {commit('asyncAdd'); resolve(); }, 2000); }); }, asyncActionB({ dispatch }, params) { return dispatch('asyncActionA').then(() => { console.log('Action complete at: ', params.date); }); } } } store.dispatch('asyncActionB', { date: (new Date()).getTime() // 2秒后打印 Action complete at: xxxxxxxx (當(dāng)前時間毫秒數(shù)) });

?

本文介紹了 Vuex 的核心知識，在下一篇博文中我介紹 Vuex 如何進(jìn)行模塊化以及工程目錄結(jié)構(gòu)創(chuàng)建。

即使項目不大，但當(dāng)數(shù)據(jù)交互較多，尤其是跨組件的事件觸發(fā)較多時，單純的使用 Vue 進(jìn)行項目開發(fā)就顯得有些吃力。使用 Vuex 可以幫我們很好的管理數(shù)據(jù)模型，希望已經(jīng)迷上使用 Vue 進(jìn)行開發(fā)的同學(xué)能很好的利用起來。

轉(zhuǎn)載于:https://www.cnblogs.com/sxz2008/p/6868217.html

總結(jié)

以上是生活随笔為你收集整理的Vuex核心知识（2.0）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。