Vuex
Vuex是類似Flux的狀態(tài)管理庫，專門用于Vue的狀態(tài)管理。
對于那些不熟悉的人來說，Flux是Facebook創(chuàng)造的一種設(shè)計模式。Flux模式由四個部分組成，組成單向數(shù)據(jù)管道：
Vuex的靈感主要來自Flux和Elm Architecture。Vuex集成的核心是Vuex存儲。
// store.js
const store = new Vuex.Store({
state,
mutations,
actions,
getters
})
Vuex存儲（Vuex Store）包含四個對象：state、mutations、actions和getters。
state 只是一個包含需要在應(yīng)用程序中共享的屬性的對象。
// store.js
const state = {
numbers: [1, 2, 3]
}
這個state對象只包含了一個numbers數(shù)組。
mutations是負責(zé)直接改變存儲狀態(tài)的函數(shù)。在Vuex中，mutations總是以state作為第一個參數(shù)。此外，actions也可以不作為第二個參數(shù)傳遞有效負載：
// store.js
const mutations = {
ADD_NUMBER(state, payload) {
state.numbers.push(payload)
}
}
在Flux架構(gòu)中，mutations中的函數(shù)通常用大寫字母表示，以區(qū)別于其他函數(shù)，并用于工具和lint目的。在上面的示例中，創(chuàng)建了一個ADD_NUMBER()的mutations，它需要一個有效的payload并將該有效的payload推送到state.numbers數(shù)組中。
actions可以調(diào)用mutations。在提交mutations之前，actions還負責(zé)所有異步調(diào)用。actions可以訪問context對象，該對象提供對state（使用context.state）、getter（使用context.getters）和commit函數(shù)（context.commit）的訪問。
下面是一個簡單的actions的示例，它只是傳遞預(yù)期的有效負載時直接提交mutations：
// store.js
const actions = {
addNumber(context, number) {
context.commit('ADD_NUMBER', number)
}
}
Vuex存儲中的getters就像組件中的計算屬性一樣。getters主要用于執(zhí)行一些計算和操作，以便在組件訪問這些信息之前存儲狀態(tài)。
像mutations一樣，getters可以訪問state作為第一個參數(shù)。這里有一個叫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
});
對于這樣簡單的一個示例，可能不一定需要Vuex存儲。上面的示例只是用來向大家展示如何使用Vuex和簡單的全局存儲在實現(xiàn)上的直接區(qū)別。
當(dāng)Vuex存儲準備好之后，Vue應(yīng)用程序可以在Vue實例中聲明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í)行以下兩種操作之一。他們要么：獲?。?code>GET）狀態(tài)信息（通過訪問store中state或getters）或者 調(diào)用（DISPATCH）actions。
下面創(chuàng)建的NumberDisplay組件，它通過將getNumbers存儲getter映射到組件getNumbers計算屬性來直接顯示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)建一個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 擴展了簡單的存儲方法。這就是使用Vuex的最初標準和主要優(yōu)勢所在。此外，Vuex和vue-devtools集成在一起，提供了更易的調(diào)試功能。
下圖就是一個關(guān)于vue-devtools如何幫助我們在發(fā)生突變時觀察存儲信息：
Vuex不是唯一個用來管理Vue狀態(tài)的庫，類似于Flux的庫在社區(qū)中還有很多種，比如redux-vue或vuejs-redux，用于擴展Redux。然而，由于Vuex是專門為Vue應(yīng)用程序而定制的，因此它無疑是最容易與Vue應(yīng)用程序集成在一起。
Vuex擴展了簡單的存儲方法，使我們的應(yīng)用程序的狀態(tài)管理變得更簡單。
原文: https://www.w3cplus.com/vue/managing-state-in-vue-js.html?utm_source=tuicool&utm_medium=referral ? w3cplus.com
