vuex入門篇 -- state和getters

前言

從這一篇文章開始，將要學習的是vuex的入門基礎內容。vuex是一個企業級程序的狀態管理的高效工具，官方認證。也將是咱們和vue打交道的內容之中經常會接觸到的部分。讓咱們來一步一步的全面的吃掉它吧。本篇文章咱們主要是講解vuex之中的兩大關鍵字，state，getters的設置。走起吧。

---

state

state，翻譯成中文表示的是狀態一詞，因此咱們能夠很明確的說這個關鍵字下面存儲的實際上就是狀態。可是什麼是狀態呢？

例如，咱們以前在vue-router學習過程之中提到的關於登錄的例子，是否登錄實際上就是一種狀態，咱們經過signIn這個布爾變量來表示用戶的登錄狀態。這實際上就是state之中設置的數據。

因此咱們在vue之中能夠將狀態理解成爲控制展現的數據變量。可是有的時候咱們的數據變量將會同時用於展現和控制，這一塊我覺的，控制成分較多的變量徹底也能夠將他理解成爲頁面或者組件的狀態，並分離出來交由vuex來進行統一的管理。

既然在vuex之中已經設置號了狀態，則咱們能能夠開始在組件和頁面之中進行使用了。使用的方式主要是由以下幾種：

• 經過this指針，使用$store變量來獲取vue之中設置的vuex對象，從而獲取當前狀態數據,固然獲取的時候，若是狀態變量編寫在了modules（模塊）變量之中的話，那麼咱們獲取的方式可見示例代碼的user Name的獲取方式，這裏userName被編寫在了名稱爲user的模塊之中。代碼以下：

computed: {
    appName() { return this.$store.state.appName } ,
    userName() { return this.$store.state.user.userName }
}
複製代碼

• 經過mapState來進行獲取: vuex爲咱們提供了mapState方法來進行狀態的獲取注入。mapState自己是一個方法。能夠傳遞的參數有namespace（命名空間）和 map（數組或者對象 -- 數組項之中傳遞須要注入的變量的名稱的字符串，對象的之中的元素對應的是函數，函數擁有一個參數state，指向的是狀態對象）。mapState依據傳遞的參數返回對應的結果對象。使用mapstate要注意的一點就是模塊之中添加的狀態管理對象，若是設置了namespaced的話，那麼當前的命名空間做爲值傳遞給mapState做爲第一個參數，將會是有效的，若是沒有設置namespaced則傳遞以後，vuex將會提示找不到相關的命名空間。上代碼：

首先要引入：
import { mapState } from "vuex"


而後一樣是在computed之中使用(傳入對象):
computed: {
    ...mapState({
        appName: state => state.appName,
        userName: state => state.user.userName
    })
}


另一種寫法（傳入數組, p.s. 在傳遞數組的時候，沒有傳遞命名空間的話，將只會在全局狀態管理對象的state
之中查找相關變量,若是沒有本地變量爲空）
computed: {
    ...mapState([
        'appName',
        'userName'
    ])
}


當咱們想要獲取模塊中設置的state對象的值的時候(例如 user模塊):
store.js之中設置以下：
{
    state:{
        ...
    },
    modules:{ //這一設置關鍵字將會在以後的modules片之中詳細說明。
        user:{
            namespaced: true (特別注意)
            state:{
                app: 'app',
                user: 'Arvin'
            }
        }
    }
}
這時候獲取user之中的信息方式以下：
computed: {
    ...mapState('user', [
        'app',
        'user'
    )
}
傳遞對象的時候就形如以前的代碼同樣，徹底能夠取的到模塊之中的狀態變量信息。
複製代碼

• 一樣的當咱們想要獲取到模塊之中的state的時候，咱們能夠藉助vuex之中的createNamespacedHelpers方法來弱化其中的模塊意味。咱們能夠引入這一方法以後，經過調用它並傳遞須要的數據的模塊名稱，從而獲得對應於模塊名稱的狀態管理對象，這一對象之中就包括了針對模塊的特定的mapState等方法。咱們獲取以後，直接傳遞數組對象，就能夠得到模塊下咱們須要的數據。可是須要注意的是這個方法專門針對於模塊之中設置了namespaced（命名空間）屬性的管理對象有效，若是沒有設置，vuex將會提示錯誤。讓咱們看一段代碼，將會更明確一點：

一樣仍是以以前的user模塊做爲例子：可見上面代碼之中store.js的設置的那一段，此處也必定須要設置號namespaced屬性，若是沒有設置則vuex將會報錯，咱們在組建之中能夠如是寫

引入：
import { createNamespacedHelpers} from "vuex"
const { mapState } = createNamespacedHelpers("user");

邏輯部分：
computed: {
    ...mapState([
        'app',
        'user'
    ])
}
複製代碼

• 再次特別提示，當咱們在modules之中設置的狀態管理對象啓用了了namespaced(命名空間屬性)屬性，則當使用mapState傳入namespace的時候纔會有效果，createNamespacedHelpers方法也才能生效，不然vuex將會報錯。而當傳毒mapState之中的是對象內容的時候，將會不受影響，一樣的經過this指針來調用也不須要改變。

---

getters

下面咱們來看一下getters，getters主要是從state之中派生出的額外的狀態。相似於vue對象之中的computed了。getters對象之中的每個元素都是一個方法，傳遞state對象做爲參數。而且getters是會緩存相關的計算數據的，並會隨着state的變化而作出相應改變的。來一段簡單的代碼：

state: {
    appName: "App"
},
getters: {
    firstLetter:(state) => {
        return state.appName.substr(0, 1)
    }
}
複製代碼

在來咱們仍是須要了解他的使用方法了：

• this指針之中$store狀態管理對象之中的getters來獲取模塊之中的管理對象。當設置了namespaced的時候，咱們須要經過相應的 模塊名稱 / getter名稱 的形式來獲取對應的getter內容。 若是沒有設置namespaced的時候，則能夠直接經過getter名稱來獲取。可是getter重名的時候vuex會怎麼作呢，這時vuex將會提示重名錯誤提示，但程序依舊能夠運行。因爲其讀取的方式是自外而內的，自上而下的，因此最終全部重名的getter的值緩存的將會是最後一個爲此名稱的getter計算出來的值。咱們使用上面store.js的設置做爲例子，咱們須要以下代買進行操做：

有namespaced設置的：
lastLetter() {
    return this.$store.getters['user/lastLetter'];
}

沒有namespaced設置的：
lastLetter() {
    return this.$store.getters.lastLetter;
}
複製代碼

• 經過mapGetters來進行getter的獲取，咱們一樣能夠引入getter爲本身所用。全局狀態管理模塊的getter獲取不在話下，可是模塊狀態管理對象有沒有設置命名空間也會影響getter的獲取。當沒有設置的時候，mapGetters能夠直接獲取當前模塊狀態管理對象的getters。設置了的話則不行。咱們來用一段代碼說明這一切。

store.js的代碼：
{
    state: {
        appName: "App"
    },
    getters: {
        firstLetter:(state) => {
            return state.appName.substr(1, 1)
        }
    },
    modules:{
        user: {
            namespaced: true,
            state:{
                userName: "Arvin Huang"
            },
            getters: {
                lastLetter: (state) => {
                    return state.userName.substr(-1, 1);
                }
            }
        },
        users: {
            state: {
                userName: 'Arvin Huang'
            },
            getters: {
                thridLetter: (state) => {
                    return state.userName.substr(3, 1);
                }
            }
        }
    }
}

引入的代碼：(import部分的代碼不要忘了，這一段代碼要卸載computed之中喲)
...mapGetters([
    "firstLetter",
    "lastLetter",
    "thridLetter"
]),
vuex將會提示lastLetter是不知道的getter，而thridLetter能夠順利的引入。
複製代碼

• 最後也使用過createNamespacedHelpers來進行操做，相似於以前state之中說的。只有模塊狀態灌流i想設置了命名空間，這一方法纔會有用。並且使用起來和以前類似，只是將代碼段之中的mapstate變成了mapGetters而已。這裏就再也不擺出詳細代碼。

• 這裏再次強調一邊namespaced的重要性，重要的事情說三遍嘛，具體的差異在以前的沒一點之中已經詳盡說明。

---

結尾

以後還會陸續的編寫出其餘的關於vuex的文章內容，若是文章有什麼錯誤或者不清晰的地方，但願幫個忙，指出一下，望共同窗習共同進步，那麼，下篇文章見。