從零開始搭建vue-ssr系列之四：Vuex詳解

時間 2019-11-06

標籤開始搭建 vue ssr 系列之四 vuex 詳解简体版

原文原文鏈接

爲何要單獨增長Vuex？

由於Vuex裏面涉及不少概念性的東西，一時之間弄不懂，當時我在項目中集成Vuex時查了不少資料，踩了很多的坑。若是剛開始接觸Vuex，你確定會從官方文檔看起，官方給的例子，就是加一減一的例子，你會發現，Vuex好複雜啊，原本能夠一步完成的事，爲何要那麼多步，並且還搞不清楚每步和每步是什麼關係，蒙了。並且他的例子只針對簡單的業務場景，對於生產環境（多component的環境），發現根本就是適用，下面讓我來一一道來

Vuex解決了什麼問題？

剛開始上項目時，我也沒打算用Vuex，由於感受那玩意沒啥用，太複雜。後來一邊作，一邊就發現一個比較難解決的問題：兄弟組件間通訊的問題！

若是不用Vuex，怎麼作？

我相信，不用Vuex也能夠解決，解決方案是：Root組件作爲中轉站，兄弟組件1向Root組件$broadcast，Root組件收到以後，再$dispatch，兄弟組件2從Root組件拿到數據，而後作業務處理，數據從樹根到樹頂，再到樹根。

這樣會帶來什麼問題？

可維護性會降低，你要想修改數據，你得維護三個地方
可讀性會降低，由於一個組件裏的數據，你根本就看不出來是從哪來的
增長耦合，大量的上傳派發，會讓耦合性大大的增長，原本Vue用Component就是爲了減小耦合，如今這麼用，和組件化的初衷相背。

是全部項目都用Vuex麼？

凡是兄弟組件有大量通訊的，建議必定要用，無論大項目和小項目，由於這樣會省不少事。

從哪裏開始？

在這裏我們先不談Vuex的裏面的幾個概念，想看，官方上有，剛上來就提這麼，效果也很差。我們先從一個簡單的實例開始。

什麼例子？

我們假設在A.vue裏面經過Ajax取來數據，而後作展現，這個簡單吧，我們用Vuex來看看怎麼搞。若是不用Vuex，咱們取完數據會放到Data裏面，而後拿到數據作v-for渲染，像這樣

...
mounted() {
    Vue.axios.get('http://localhost:5000/data').then((response) => {
        const list = response.data.data.liveWodList
        this.newList = list
    })
}
...

若是用Vuex呢？

顯然他不在你的A.vue裏面，因此你得告訴他，來數據了，快收一下，怎麼通知呢，這就涉及到Vuex的第一個操做：commit。這裏這個操做，對應Vuex的核心概念之一：Mutations（變化）！他的做用就是通知Vuex要搞事情了，好比刪除數據、增長數據等，代碼是這樣的this.$store.commit('setData', list)，這個有兩個參數，第一個參數是要搞的事情，第二個參數是具體的數據。

數據存哪了？

你的數據是來了，我得有地來接收數據吧，接收數據的地對應Vuex的核心概念之二State（狀態），就是全部須要變化的東西都存在我這。代碼是這樣的：

function setData(state, data) {
    state.list = data
}

怎麼拿到數據？

有放確定有取啊，數據存在State，取也是從這裏取。取數據就對應Vuex的核心概念之三Getters，代碼是這樣的的：

const getters = {
    list: state => state.list
}

目錄結構

store
|____modules
| |____list.js
|____mutation-types.js
|____store_index.js

這是在原目錄的基礎上增長的目錄，原項目的地址。

這個目錄結構有什麼好處？

這是Vuex在真正項目中用到的，分模塊，每一個模塊一個文件（modules），首先咱們看下store/mutation-types.js。這個文件的結構比較簡單，代碼以下：

export const LIST = {
    GET_DATA: 'getData',
    ADD_DATA: 'addData'
}

功能是：定義常量。常量的做用不用細說，防止手寫寫錯。實際開發中，應該是每個模塊一個常量，如今只有一個LIST，將來可能會多增長NEWS/USER等，也是一個模塊，一個常量對象。
再看modules/list.js，代碼以下：

import {
    LIST
} from '../mutation-types'

const state = {
    list: []
}

const mutations = {
    [LIST.GET_DATA](state, data) {
        state.list = data
    }
}
const getters = {
    list: state => state.list
}

這裏面就有對應的三個概念state/mutations/getters，能夠和我上面說的對比一下，如今看代碼，應該很清晰了。注意：裏面有不少ES6的語法，不明白的能夠查一查。
store/store-index.js爲入口文件，裏面主要是引入各配置，供Vue使用。注意：這個文件的引入是在src/index.js裏面！