Vuex核心知識（2.0）

時間  2019-11-09
標籤 vuex 核心 知識 2.0 简体版
原文   原文鏈接

Vuex 是一個專門爲 Vue.js 應該程序開發的狀態管理模式，它相似於 Redux 應用於 React 項目中，他們都是一種 Flux 架構。相比 Redux，Vuex 更簡潔，學習成本更低。但願經過本文幫助還沒使用 Vuex 的同窗快速上手。vue

注：本文針對 Vuex 2.0 的語法，目前經過 npm 默認下載的版本爲 1.0+ ，想引入 2.0 版本能夠經過 script 標籤引入。vuex

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

習慣使用 ES6 中 import 方法的能夠暫時經過解構賦值的方式引入 Vuex 中的方法。npm

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

 

Vuex 的核心內容主要就是 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 對象，它用來保存最基本的數據。app

在 Vue 中獲取 store 中的狀態異步

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

最簡單的方式就是經過 Vue 中的計算屬性(computed) 來將 store 中的狀態映射爲 Vue 的數據。可是當數據多時這種方法明顯效率太低，因此 Vuex 中提供了 mapState 方法用於批量映射 store 中的狀態。async

首先必須在 Vue 中註冊 store 選項，這樣整個 store 就從根節點註冊到 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 中的箭頭函數進行數據的映射，b. 當計算屬性的名稱與 state 的屬性名一致時可能直接經過字符串賦值，c. 當須要引用上下文中的 data 屬性實，只能經過常規函數來使 this 生效。函數

若是全部計算屬性的名稱都與 state 一致，能夠在 mapState 中以數組的方式進行映射。若是 Vue 中已經存在計算屬性，能夠經過 ES6 的展開操做符 (...) 進行組合。

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

 

Getters

當須要對 store 中的數據進行處理，或者須要對處理後的數據進行復用，就可使用 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 接收兩個參數，1. state、2. getters 自己，能夠引用其餘 getters。與 mapState 相似，Getters 也擁有 mapGetters 方法，用於批量映射。

let { mapGetters } from 'Vuex';

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

 

Mutations

在 Vue 中，data 值是能夠直接被更改的。可是在 Vuex 中，不能直接對 state 進行操做，惟一的方法就是提交 mutation。mutation 能夠理解爲 Vue 中的 method 事件，只不過調用 mutation 須要特別的方法。

let store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        addCount(state) {
            state.count ++;
        }
    }
});

store.commit('addCount');

console.log(store.state.count); // 1

每個 mutation 都有一個字符串的事件類型和一個回調函數。一般在回調函數中進行狀態更改，經過 store.commit 觸發事件。 

傳參

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

store.commit('addCount', 10);

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

// ...
mutations: {
    addCount(state, params) {
        state.count += params.num;
    }
}

store.commit('addCount', {
    num: 10
});

store.commit({
    type: 'addCount',
    num: 10
});

這裏有一個規則須要遵照，在 mutation 中更改 state 應該以新對象替換老對象，不要在直接原對象上直接修改。*熟悉 React 的朋友們應該知道，在使用 setState 更新狀態時也是一樣的規則。

經過 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 必須是同步函數

咱們先試着寫一個異步的 mutation ，看看會發生什麼。

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

store.commit('asyncAdd');

經測試，在 mutaion 裏進行異步操做也是會生效的，2秒以後 state.count 確實發生改變。

那爲何還要強調 mutation 必須是同步的呢？由於在觸發 commit 以後，回調函數尚未被調用，因此此次 mutation 的修改也是沒法被調試工具所記錄的。

如何對 state 進行異步操做呢，就要使用下面的 Action 了。

 

Actions

Action 相似於 mutation，不一樣在於：

1. Action 不直接更改狀態，而是提交 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 中的回調函數會接收一個上下文 context 對象，它包含了當前 store 中全部屬性和方法，但其不是 store 自己。你能夠經過 context.commit 來提交 mutation，也能夠經過 context.state 與 context.getters 來獲取 state 和 getters。

當須要屢次調用 commit 時，可使用 ES6 的語法對傳入的參數進行解構。

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

分發 Action 與傳參

Action 是經過 store.dispatch 方法來觸發，傳參方式與 store.commit 相似。

store.dispatch('asyncAdd');

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

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

在 Vue 組件中分發 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 對象進行組合。

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 (當前時間毫秒數)
});

 

本文介紹了 Vuex 的核心知識，在下一篇博文中我介紹 Vuex 如何進行模塊化以及工程目錄結構建立。

即便項目不大，但當數據交互較多，尤爲是跨組件的事件觸發較多時，單純的使用 Vue 進行項目開發就顯得有些吃力。使用 Vuex 能夠幫咱們很好的管理數據模型，但願已經迷上使用 Vue 進行開發的同窗能很好的利用起來。

 

感謝你的瀏覽，但願能有所幫助。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程