VUEX全局狀態(tài)管理

Vuex

Vuex是類似Flux的狀態(tài)管理庫碍脏，專門用于Vue的狀態(tài)管理帅霜。

對于那些不熟悉的人來說奸攻，Flux是Facebook創(chuàng)造的一種設(shè)計(jì)模式蒜危。Flux模式由四個(gè)部分組成，組成單向數(shù)據(jù)管道：

image

Vuex的靈感主要來自Flux和Elm Architecture睹耐。Vuex集成的核心是Vuex存儲辐赞。

// store.js
const store = new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

Vuex存儲（Vuex Store）包含四個(gè)對象：state、mutations硝训、actions和getters响委。

state 只是一個(gè)包含需要在應(yīng)用程序中共享的屬性的對象。

// store.js
const state = {
    numbers: [1, 2, 3]
}

這個(gè)state對象只包含了一個(gè)numbers數(shù)組捎迫。

mutations是負(fù)責(zé)直接改變存儲狀態(tài)的函數(shù)晃酒。在Vuex中，mutations總是以state作為第一個(gè)參數(shù)窄绒。此外贝次，actions也可以不作為第二個(gè)參數(shù)傳遞有效負(fù)載：

// store.js
const mutations = {
    ADD_NUMBER(state, payload) {
        state.numbers.push(payload)
    }
}

在Flux架構(gòu)中，mutations中的函數(shù)通常用大寫字母表示彰导，以區(qū)別于其他函數(shù)蛔翅，并用于工具和lint目的敲茄。在上面的示例中，創(chuàng)建了一個(gè)ADD_NUMBER()的mutations山析，它需要一個(gè)有效的payload并將該有效的payload推送到state.numbers數(shù)組中堰燎。

actions可以調(diào)用mutations。在提交mutations之前笋轨，actions還負(fù)責(zé)所有異步調(diào)用秆剪。actions可以訪問context對象，該對象提供對state（使用context.state）爵政、getter（使用context.getters）和commit函數(shù)（context.commit）的訪問仅讽。

下面是一個(gè)簡單的actions的示例，它只是傳遞預(yù)期的有效負(fù)載時(shí)直接提交mutations：

// store.js
const actions = {
    addNumber(context, number) {
        context.commit('ADD_NUMBER', number)
    }
}

Vuex存儲中的getters就像組件中的計(jì)算屬性一樣钾挟。getters主要用于執(zhí)行一些計(jì)算和操作洁灵，以便在組件訪問這些信息之前存儲狀態(tài)。

像mutations一樣掺出，getters可以訪問state作為第一個(gè)參數(shù)徽千。這里有一個(gè)叫getNumbers的getter，它只返回state.numbers數(shù)組：

// store.js
const getters = {
    getNumbers(state) {
        return state.numbers
    }
}

最后store.js的代碼如下所示：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
    numbers: [1, 2, 3]
};

const mutations = {
    ADD_NUMBER(state, payload) {
        state.numbers.push(payload);
    }
};

const actions = {
    addNumber(context, number) {
        context.commit("ADD_NUMBER", number);
    }
};

const getters = {
    getNumbers(state) {
        return state.numbers;
    }
};

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
});

對于這樣簡單的一個(gè)示例汤锨，可能不一定需要Vuex存儲双抽。上面的示例只是用來向大家展示如何使用Vuex和簡單的全局存儲在實(shí)現(xiàn)上的直接區(qū)別。

當(dāng)Vuex存儲準(zhǔn)備好之后泥畅，Vue應(yīng)用程序可以在Vue實(shí)例中聲明store對象荠诬，可以提供給Vue應(yīng)用程序使用。

// main.js
import Vue from "vue";
import App from "./App";
import store from "./store";

new Vue({
    el: '#app',
    store,
    components: {
        App
    },
    template: '<App />'
})

有了Vuex存儲之后位仁，組件通掣陶辏可以執(zhí)行以下兩種操作之一。他們要么：獲饶羟馈（GET）狀態(tài)信息（通過訪問store中state或getters）或者調(diào)用（DISPATCH）actions钧嘶。

下面創(chuàng)建的NumberDisplay組件，它通過將getNumbers存儲getter映射到組件getNumbers計(jì)算屬性來直接顯示state.numbers數(shù)組琳疏。

<!-- NumberDisplay.vue -->
<template>
    <div>
        <h2>{{ getNumbers }}</h2>
    </div>
</template>

<script>
    export default {
        name: 'NumberDisplay',
        computed: {
            getNumbers() {
                return this.$store.getters.getNumbers
            }
        }
    }
</script>

接著再創(chuàng)建一個(gè)NumberSubmit組件有决，允許用戶通過addNumber方法映射到同名的actions，然后將新輸入的數(shù)字添加到state.numbers：

<!-- NumberSubmit.vue -->
<template>
    <div class="form">
        <input v-model="numberInput" type="number" />
        <button @click="addNumber(numberInput)">Add new number</button>
    </div>
</template>

<script>
    export default {
        name: 'NumberSubmit',
        data: () => ({
            numberInput: 0
        }),
        methods: {
            addNumber(numberInput) {
                this.$store.dispatch('addNumber', Number(numberInput))
            }
        }
    }
</script>

最后在App.vue中引入前面創(chuàng)建的組件：

<!-- App.vue -->
<template>
    <div id="app">
        <NumberDisplay/>
        <NumberSubmit/>
    </div>
</template>

<script>
    import NumberDisplay from "./components/NumberDisplay";
    import NumberSubmit from "./components/NumberSubmit";

    export default {
        name: "App",
        components: {
            NumberDisplay,
            NumberSubmit
        }
    };
</script>

我們可以看到空盼，Vuex通過引入顯式定義的actions书幕、mutations和getters 擴(kuò)展了簡單的存儲方法。這就是使用Vuex的最初標(biāo)準(zhǔn)和主要優(yōu)勢所在揽趾。此外台汇，Vuex和vue-devtools集成在一起，提供了更易的調(diào)試功能。

下圖就是一個(gè)關(guān)于vue-devtools如何幫助我們在發(fā)生突變時(shí)觀察存儲信息：

image

Vuex不是唯一個(gè)用來管理Vue狀態(tài)的庫苟呐，類似于Flux的庫在社區(qū)中還有很多種痒芝，比如redux-vue或vuejs-redux，用于擴(kuò)展Redux牵素。然而严衬，由于Vuex是專門為Vue應(yīng)用程序而定制的，因此它無疑是最容易與Vue應(yīng)用程序集成在一起笆呆。

Vuex擴(kuò)展了簡單的存儲方法请琳，使我們的應(yīng)用程序的狀態(tài)管理變得更簡單。
原文: https://www.w3cplus.com/vue/managing-state-in-vue-js.html?utm_source=tuicool&utm_medium=referral ? w3cplus.com