Vuex — The core of Vue application

Aldous 發(fā)布于2019-08-20 10:25 / 1077人閱讀

摘要：個人看來，一個狀態(tài)管理的應(yīng)用，無論是使用，還是，最困難的部分是在的設(shè)計。中，并沒有移除，而是改為用于觸發(fā)。也是一個對象，用于注冊，每個都是一個用于返回一部分的。接受一個數(shù)組或?qū)ο?，根?jù)相應(yīng)的值將對應(yīng)的綁定到組件上。

系列文章:

Vue 2.0 升（cai）級（keng）之旅

Vuex — The core of Vue application (本文)

從單頁應(yīng)用(SPA)到服務(wù)器渲染(SSR)


當今，談到狀態(tài)管理首先想到的肯定是 Redux，而隨著 Vue 2.0 的發(fā)布，Vuex 也伴隨著推出了最新版，本文就帶你對照 Redux 來看看剛剛出爐的 Vuex 2.0。
有關(guān) Redux 的基礎(chǔ)概念在本文中會簡要略過，如再一一贅述篇幅就太長了，不了解的可以看一下本人之前寫的有關(guān) Redux 的兩篇文章：

Redux 入門

Redux 進階

為什么說 Vuex 是 Vue 應(yīng)用的核心？

眾所周知，一個應(yīng)用的外觀可以千變?nèi)f化，但無論如何變化，它都需要一樣東西去支撐，那就是——數(shù)據(jù)。這個數(shù)據(jù)是廣義上的，可以是數(shù)據(jù)庫中的數(shù)據(jù)，也可以是當前應(yīng)用所處的狀態(tài)，甚至可以是 WebRTC, Web Bluetooth 等一系列實時數(shù)據(jù)。

在 vue 應(yīng)用中，vuex 就充當了數(shù)據(jù)提供者的角色，vue 則只需要關(guān)注頁面的展示與交互。

既然，明確了以 vuex 為核心，那么就來看看如何在 vue 應(yīng)用中使用 vuex？

隨著 Vue 2.0 的發(fā)布，Vuex 在近期也隨之推出 2.0 版。在上一篇文章中有提到作者的博客是用 vue 2.0 搭建的，但之前并沒有添加 vuex，現(xiàn)在正可以借此機會將 vuex 添加到項目中。

本文將介紹 Vuex 2.0 的同時，分享一些本人在這個過程中的一些心得。

首先，當然是核心的核心 Store。

Store

Store 用來存放整個應(yīng)用的 state。

那怎么建立 store 哪？由于，Vuex 2.0 剛剛推出，最新的 API 還得看 Release Note。

創(chuàng)建一個 Store 非常簡單只需 new Vuex.Store({ ...options })，其中，options 可以是一下幾種：

state Object：存放應(yīng)用狀態(tài)

actions Object：注冊 action

mutations Object：注冊 mutation

getters Object：注冊 getter

modules Object：注冊 module

plugins Array：注冊中間件

strict Boolean：是否開啟嚴格模式，嚴格模式下所有對 state 的變化必須通過 mutation 來修改，反之拋出異常，默認不開啟。

或許你不了解這些屬性的含義，沒關(guān)系，之后每個還會分別解釋。

明白了屬性的含義，那么創(chuàng)建一個 store 的代碼就可能會是這樣

// store.js
import Vue from "vue";
import Vuex from "vuex";
import createLogger from "vuex/logger";

import blog from "./module/blog";

// 在 Vue 中，注冊 Vuex
Vue.use(Vuex);

export default new Vuex.Store({
    state: {},
    plugins: process.env.NODE_ENV !== "production" ? [createLogger()] : [],
    modules: {
        blog
    }
});

store 創(chuàng)建完成之后，就可以在根組件中使用了。

import Vue from "vue";
import store from "../vuex";
import router from "./router";
import "./blog";

new Vue({
    store,
    router,
    template: ""
}).$mount("#app");

個人看來，一個狀態(tài)管理的應(yīng)用，無論是使用 vuex，還是 redux，最困難的部分是在 store 的設(shè)計。

究竟該如何設(shè)計一個 store，是根據(jù)組件的結(jié)構(gòu)層次設(shè)計對應(yīng)的 store，還是根據(jù)應(yīng)用數(shù)據(jù)來設(shè)計 store？

由于，store 是存放整個應(yīng)用狀態(tài)的地方，所以，起初我認為應(yīng)該是前者按組件的層次結(jié)構(gòu)去設(shè)計。這樣 store 中分別保存著每個組件的狀態(tài)，這對大型項目來說或許會造成大量的冗余數(shù)據(jù)存儲在 store 中，以及一些重復的工作，但這也提供了簡潔鮮明的層次結(jié)構(gòu)，增強了項目的可維護性，這對大型項目來說更至關(guān)重要。

但伴隨著寫項目時的思考，我漸漸推翻了之前的想法。

假設(shè)這樣一個場景，項目中有兩個互不相關(guān)的組件，但它們倆卻依賴同一份數(shù)據(jù)源。如果，這時采用之前的設(shè)計方法，那么這同一份數(shù)據(jù)源會被存放在 store 的兩個不同的位置。那么此時，如果一個組件需要對數(shù)據(jù)源進行操作的話，它不但需要修改自己組件對應(yīng)的 state，同時還要發(fā)起 action 來修改另一個組件的 state，這恰恰違背了組件的單一性。

然而，使用應(yīng)用數(shù)據(jù)來設(shè)計 store 就不會有這樣的問題。鑒于這個原因，我現(xiàn)在更傾向于第二個理念來設(shè)計整個應(yīng)用的 store。

所以，當項目開始時，要考慮到整個應(yīng)用的數(shù)據(jù)模型來設(shè)計 store 真是相當麻煩啊。

談完了 store，就再一個個來看剛剛創(chuàng)建 store 時所提到的屬性，state 就是用來保存狀態(tài)的，沒啥好說的，直接來看看第二個 actions。

Actions

actions 是一個對象，key 就是 action 的名字，value 就是對應(yīng)的 action。此處的 action，無論從名字，還是作用都和 redux 中的 action 相同，用于激發(fā) state 的變更。但是，它們的用法卻不相同。

Redux 中的 action 需要返回一個 JS 對象，即使加了 thunk 中間件之后，能夠返回一個函數(shù)，但這個函數(shù)最終返回的還是一個 JS 對象，最后通過，store.dispatch 該對象來觸發(fā) state 的變更。

然而，Vuex 中的 action 它本身就是一個方法，并且這個方法并不需要任何的返回，而是，通過 store.commit 來觸發(fā) mutation。

Vuex 2.0 中，已將原先的 store.dispatch 改名為了 store.commit 來觸發(fā) mutation。
Vuex 2.0 中，并沒有移除 store.dispatch，而是改為用于觸發(fā) action。

所有 action 方法接受當前 store 的實例作為第一個參數(shù)，調(diào)用傳遞的參數(shù)會作為第二個參數(shù)傳入（暫不支持多參數(shù)）。

Mutations

mutations 也是一個對象，同 actions 類似，key 就是 mutation 的名字，value 就是對應(yīng)的 mutation。

mutation 用于更新應(yīng)用的 state。Redux 中雖然沒有 mutation 這個詞，但從上面的解釋就明白，這同 redux 中的 reduce 起著相同的作用。

但兩者在寫法上又有著不同，由于 vuex 中的 mutations 是一個對象，并借用 ES6 對象方法可以使用變量和省略的特點，調(diào)用 mutation 可以直接通過命名找到相應(yīng)的處理方法，這使得它比 redux 的一系列 switch/case 語句要更簡單、更優(yōu)雅。

更大的不同之處在于 redux 的 reduce 是要求返回一個新的 state，而 vuex 就如它的命名 mutations（變異）是對當前 state 進行操作，而不能返回一個新的 state，這里就和 FP 的理念有所沖突了。

// mutations.js
export default {
    // work
    [LOAD_SOCIAL_LINK](state = {}, mutation = {}) {
        state.socialLinkList = mutation.payload
            .filter(item => !!item.link)
            .map(item => ({
                ...item,
                svgPath: svgPath + "#" + item.name
            }));
    }
    
    // not work
    [LOAD_SOCIAL_LINK](state = {}, mutation = {}) {
        state = {
            ...state,
            socialLinkList: mutation.payload
                .filter(item => !!item.link)
                .map(item => ({
                    ...item,
                    svgPath: svgPath + "#" + item.name
                }))
        };
    }
};

單就這點來看，redux 略勝一籌。

Getters

Getters 也是一個對象，用于注冊 getter，每個 getter 都是一個 function 用于返回一部分的 state。

getter 方法接受 state 作為第一個參數(shù)，一個簡單的 getters 就可能是這樣：

export default {
    // 省略...
    getters: {
        socialLinkList: state => state.socialLinkList
    }
};

掌握了 Store, Actions, Mutations 以及 Getters 這幾個概念，那你就掌握了 vuex 的核心，已經(jīng)完全可以創(chuàng)建一個完整的 store，并可以使用了。

但隨著項目的增長，你會發(fā)現(xiàn)將 Actions, Mutations, Getters 全都寫在一起非常難以維護，這時你會想念 Redux 中將 state 劃分處理的 combineReducers。

醒醒！別想 Redux 啦，Vuex 也可以劃分處理 state 樹，它就是接著就要提到的 modules。

Modules

Modules 的作用就如它的名字，劃分模塊。

它的屬性也是一個對象，key 是對應(yīng)的 module 名，在 state 中會創(chuàng)建相應(yīng)的 key，而 value 是一個用于配置如何創(chuàng)建 module 的對象，該對象的屬性基本同創(chuàng)建 store 時的 options 對象一樣，只少了最后 2 個還沒有講到的屬性 plugins 和 strict。這兩者是不是有什么關(guān)系哪？

class Store {
  constructor (options = {}) {
    // 省略...
    
    // init root module.
    // this also recursively registers all sub-modules
    // and collects all module getters inside this._wrappedGetters
    installModule(this, state, [], options)
    
    // 省略...
  }

從 vuex 創(chuàng)建的源碼中可以看到，其實，store 它本身就是一個 module。

既然，modules 中能配置 modules 那就意味著：模塊是可以嵌套的。那么，使用 modules 就可以將 state 劃分為各個模塊，同 combineReducers 一樣可以化繁為簡，這對中大型項目來說必不可少。

一個 module 的定義就可以是這樣。

// nav module
import mutations from "./mutations";
import actions from "./actions";

export default {
    state: {},
    getters: {
        navList: state => state.navList
    },
    actions,
    mutations
};

警報！前方第 6 行有坑，請速速繞行。

第 6 行？

state: {}, 初始化 state 能有什么問題?。?/p>

當你運行你的應(yīng)用的時候，你會發(fā)現(xiàn)，如果 navList 的變化是由一個同步的方法返回的就沒有問題，但如果，它是通過異步方法返回的，你會發(fā)現(xiàn)雖然控制臺上的 mutation log 輸出正確，但你的組件中并沒有得到正確的值。

因為，當 action 調(diào)用之后會計算一次 getter，如果是同步的，那么此時 getter 的 state 中已經(jīng)保存著最新的數(shù)據(jù)。

但如果是異步的，那么此時 getter 中的 state 是一個空對象，那么上例中的 state.navList 就會返回一個 undefined。然而，undefined 就不會進入 vue 的 watch 系統(tǒng)，所以當異步請求結(jié)束后，即使 state 中對應(yīng)字段變?yōu)榱四繕酥?，但也不會再調(diào)用 getter 了，組件中的值自然也不會更新了。

那怎么解決哪？那就是給 state 中的每個屬性設(shè)初始值，這樣在第一次計算 getter 的值時就會返回對應(yīng)的初始值，而這個初始值是在 vue 的系統(tǒng)中的，所以當異步請求結(jié)束后調(diào)用 mutation 改變 state 中對應(yīng)的值后，getter 會自動觸發(fā)更新，此時，組件中對應(yīng)的值也就被修改了。

所以，一定要記得：

為每個屬性設(shè)置初始化 state ?。?！
為每個屬性設(shè)置初始化 state ?。。?/p>
為每個屬性設(shè)置初始化 state ?。。?/p>

重要的話，說三遍?。?！

最后，在使用 modules 還需要注意，在不同 modules 下，注冊的 action 或 mutation 的名字重復并不會報錯，但都會被調(diào)用，所以要注意命名。

好，modules 講完了，繼續(xù)看下一個屬性 plugins。

Plugins

vuex 自 1.0 版開始就將原先的 middlewares 替換成了 plugins。也就是說，現(xiàn)在使用的 plugins 就是中間件。

plugins 的參數(shù)終于同之前的有所不同了，是一個數(shù)組，數(shù)組中的每一項都是一個方法，方法接受一個參數(shù)就是當前 store 的實例。

    // vuex source code: apply plugins
    plugins.concat(devtoolPlugin).forEach(plugin => plugin(this))

vuex 中間件的編寫理解起來也十分容易，就是通過 store.subscribe 來訂閱 mutation 的變化，這比 redux 中間件的工作原理更容易理解。

最后的 strict 屬性之前已經(jīng)提到了，就是用來設(shè)置時候開啟嚴格模式的，嚴格模式下，state 只能通過 mutation 來修改。

至此，創(chuàng)建 vuex store 的所有屬性都講完了，store 也就完成了，那么，vue 的組件該如何和 vuex 的 store 鏈接起來哪？

連接到組件

vuex 1.0 之前如何將 vuex 連接到組件在這里就不說了，有興趣可以上官網(wǎng)上看看。

主要來看看如何使用 vue 2.0 新增的 4 個 helper 方法優(yōu)雅地將 vuex 連接到組件。

這 4 個 helper 方法，分別是：

mapState

mapMutations

mapGetters

mapActions

常言道：口說無憑。

我們就來看一個博客升級中的簡單例子，沒有加入 vuex 前，本人博客的首頁是這樣設(shè)定的：

// home.js
import Vue from "vue";

import PostService from "../../../common/service/PostService";

import img from "../../../assets/img/home-bg.jpg";
import template from "./home.html";

const Home = Vue.extend({
    template,
    data: () => {
        return {
            header: {
                img,
                title: "D.D Blog",
                subtitle: "Share More, Gain More."
            },
            postList: []
        };
    },
    created() {
        const postService = new PostService();
        postService.queryPostList().then(({postList}) => (this.postList = postList));
    }
});

這里我們回顧一下之前的所講，為 home 組件創(chuàng)建對應(yīng)的 store module。

// index.js
// mutation types
const INIT_HOME_PAGE = "INIT_HOME_PAGE";
const LOAD_POST_LIST = "LOAD_POST_LIST";

// actions
const initHomePage = ({dispatch, commit}) => {
    commit(createAction(INIT_HOME_PAGE, {
        header: {
            image,
            title: "D.D Blog",
            subtitle: "Share More, Gain More."
        }
    }));
    dispatch("loadPostList");
};

const loadPostList = ({commit}) => {
    new PostService().queryPostList()
        .then((result = {}) => {
            commit(createAction(LOAD_POST_LIST, {
                postsList: result.postsList
            }));
        });
};

const actions = {initHomePage, loadPostList};

// mutations
const mutations = {
    [INIT_HOME_PAGE](state = {}, mutation = {}) {
        state.header = mutation.payload.header;
    },

    [LOAD_POST_LIST](state = {}, mutation = {}) {
        state.postsList = mutation.payload.postsList;
    }
};

export default {
    state: {
        header: {},
        postsList: []
    },
    getters: {
        postsList: state => state.postsList
    },
    actions,
    mutations
};

const createAction = (typeName = "", data = "") => ({ type: typeName, payload: data });

這里的 createAction 是自己創(chuàng)建的一個簡單函數(shù)，用于格式化 mutation 獲得的參數(shù)，這并不是必須的，vuex 的 commit 方法是接受參數(shù)為 (type, data) 的。

OK。對應(yīng)的 store module 也創(chuàng)建好了，就來改組件吧。

首先，應(yīng)用的狀態(tài)都來自于 store，那么組件中的 data 屬性自然就不用了，直接刪除。爽~

const Home = Vue.extend({
    template,
    created() {
        const postService = new PostService();
        postService.queryPostList().then(({postList}) => (this.postList = postList));
    }
});

其次，原先在 created hooks 里直接去查數(shù)據(jù)，現(xiàn)在用了 vuex 自然要通過調(diào)用 action 來獲取數(shù)據(jù)，這里就要用到 4 大金剛之一——mapActions 來獲取 vuex 中設(shè)定好的 action。

mapActions 接受一個數(shù)組或?qū)ο?，根?jù)相應(yīng)的值將對應(yīng)的 action 綁定到組件上。

import {mapActions} from "vuex";

const Home = Vue.extend({
    template,
    methods: mapActions(["initHomePage"]),
    created() {
        this.initHomePage();
    }
});

數(shù)據(jù)拿到了，怎么綁定到組件上哪？這就可以用到另兩個 helper：mapState 和 mapGetters。

mapState 和 mapGetters 同樣接受一個數(shù)組或?qū)ο?，并根?jù)相應(yīng)的值將 store 中的 state 或 getter 綁定到組件上。

import vue from "vue";
import { mapState, mapGetters, mapActions } from "vuex";

import template from "./home.html";

const Home = vue.extend({
    template,
    computed: {
        ...mapState({
            header: state => state.home.header
        }),
        ...mapGetters(["postsList"])
    },
    methods: mapActions(["initHomePage"]),
    created() {
        this.initHomePage();
    }
});

哈哈，這樣模板不用改變一分一毫，升級就完成啦~

是不是很簡潔，很優(yōu)雅~

容器組件和展示組件

容器組件和展示組件這個概念在 Redux 入門一文中已有提到。然而，這個概念并不只服務(wù)于 react，在 vue 中也可以用到。

簡單來說，容器組件就是用于包裹展示組件的組件，它和界面展示無關(guān)，它負責數(shù)據(jù)的獲取和傳遞，之前的 home 組件就是一個容器組件，再來看看它的 template，你會發(fā)現(xiàn)它除了根元素以外，不包含其他任何的 html 標簽。

與此相反的是，展示組件單單用于展示，自己不獲取任何數(shù)據(jù)，數(shù)據(jù)都通過 props 傳遞，比如 content-header。

const template = `
    
        
            
                
                    {{ title }}
                    
                    {{ subtitle }}
                
            
        
    
`;

export default Vue.component("contentHeader", {
    template,
    props: {
        boardImg: {
            type: String,
            default: _defaultImg
        },
        title: {
            type: String,
            required: true
        },
        subtitle: {
            type: String
        }
    }
});

這樣明確地區(qū)分容器組件和展示組件會使得項目結(jié)構(gòu)變得更清晰，追蹤 bug ，以及維護也變得輕而易舉。

管理路由

是不是覺得這樣就完了？

No, No, No. 路由系統(tǒng)還沒處理，那么如何將 vue-router 納入到 vuex 的管理中哪？

這里又得感謝尤大大為我們造好了一個小工具 vuex-router-sync。

首先，安裝

npm install vuex-router-sync@next --save

然后，在項目初始化的時候?qū)?router 同 store 聯(lián)系起來就行，簡單到都不知道說啥好。

不知道說啥，就說說原理，看看源碼吧。

這個工具的原理也非常好理解，主要是 2 點：

一是，給 vuex 的 store 注冊一個 router 的 module。

function patchStore (store) {
  // 略...
  var routeModule = {
    mutations: {
      "router/ROUTE_CHANGED": function (state, to) {
        store.state.route = to
      }
    }
  }

  // add module
  if (store.registerModule) {
    store.registerModule("route", routeModule)
  } else if (store.module) {
    store.module("route", routeModule)
  } else {
    store.hotUpdate({
      modules: {
        route: routeModule
      }
    })
  }
}

另一個，就是使用 vue-router 的 afterEach hooks 來觸發(fā) mutation。

exports.sync = function (store, router) {
  patchStore(store)
  store.router = router

  var commit = store.commit || store.dispatch
  // 略...
  
  // sync store on router navigation
  router.afterEach(function (transition) {
    if (isTimeTraveling) {
      isTimeTraveling = false
      return
    }
    var to = transition.to
    currentPath = to.path
    commit("router/ROUTE_CHANGED", to)
  })
}

項目中使用：

import { sync } from "vuex-router-sync";
import store from "../vuex";
import router from "./router";

sync(store, router);

new Vue({
    store,
    router,
    template: ""
}).$mount("#app");

OK，這樣就大功告成了。

寫在最后

加入了 vuex 后，我的博客終于讓 vue 它們一家子（vue + vuex + vue-router）團圓了。

總的來看，vuex 同 vue 一樣使用起來相當方便，集成了許多方法，但似乎缺少了 redux 的那份優(yōu)雅，而我喜歡比較優(yōu)雅的...（看在全篇我都在安利 vue 的情面上，尤大大請不要打我~）

PS: 一下把 vuex 有關(guān)的一股腦都過了，可能過得太快，如有不明白的就留言吧。

最后的最后，當然是繼續(xù)安利下自己的 Blog，以及 Source Code。

GPU云服務(wù)器云服務(wù)器 Vue_Vuex the Vuex vuex cdn

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/80137.html

發(fā)表評論

登陸后可評論

0條評論

Aldous

男|高級講師

我要關(guān)注我要私信

TA的文章

美妝專題研究報告（合集）

閱讀 1683·2021-11-23 09:51
EasyUi項目《網(wǎng)上書城》之權(quán)限登陸，注冊，左側(cè)樹形菜單

閱讀 3697·2021-09-26 09:46
當過服務(wù)員、快遞員，現(xiàn)在年薪30W，歷盡山河叛逆少年終會成長

閱讀 2197·2021-09-22 10:02
前端—初級階段2(5-8)

閱讀 1994·2019-08-30 15:56
css3 響應(yīng)式神器 calc()

閱讀 3391·2019-08-30 12:51
flex布局的溫故學習

閱讀 2285·2019-08-30 11:12
z-index與堆疊上下文

閱讀 2120·2019-08-29 13:23
vue 1.x 組件數(shù)據(jù)傳遞

閱讀 2380·2019-08-29 13:16

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Vuex — The core of Vue application

{{ title }}

相關(guān)文章

**淺談MVC,MVP,MVVM漸進變化及React與Vue比較**

**實例PK(Vue服務(wù)端渲染 VS Vue瀏覽器端渲染)**

**推送近期三波關(guān)于Vue.js的資訊**

Vue運行時全解析 - VueCLI3上手（一）

發(fā)表評論

0條評論

Aldous

男|高級講師

TA的文章

美妝專題研究報告（合集）

EasyUi項目《網(wǎng)上書城》之權(quán)限登陸，注冊，左側(cè)樹形菜單

當過服務(wù)員、快遞員，現(xiàn)在年薪30W，歷盡山河叛逆少年終會成長

前端—初級階段2(5-8)

css3 響應(yīng)式神器 calc()

flex布局的溫故學習

z-index與堆疊上下文

vue 1.x 組件數(shù)據(jù)傳遞

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Vuex — The core of Vue application

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！