摘要：使用在的單頁面應(yīng)用中使用，需要使用調(diào)用插件。使用非常簡單，只需要將其注入到根實例中。想要異步地更改狀態(tài)需要使用。將映射為也支持載荷將映射為將分割為模塊。的基本使用大致如此。

使用
在 Vue 的單頁面應(yīng)用中使用，需要使用Vue.use(Vuex)調(diào)用插件。
使用非常簡單，只需要將其注入到Vue根實例中。
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
state: {

count: 0

},
getter: {

doneTodos: (state, getters) => {
  return state.todos.filter(todo => todo.done)
}

},
mutations: {

increment (state, payload) {
  state.count++
}

},
actions: {
addCount(context) {

// 可以包含異步操作
// context 是一個與 store 實例具有相同方法和屬性的 context 對象

}
}
})
// 注入到根實例
new Vue({
el: "#app",
store,
template: "",
components: { App }
})

然后改變狀態(tài)：
this.$store.commit("increment")

Vuex 主要有四部分：

state：包含了store中存儲的各個狀態(tài)。
getter: 類似于 Vue 中的計算屬性，根據(jù)其他 getter 或 state 計算返回值。
mutation: 一組方法，是改變store中狀態(tài)的執(zhí)行者。
action: 一組方法，其中可以含有異步操作。

state
Vuex 使用 state來存儲應(yīng)用中需要共享的狀態(tài)。為了能讓 Vue 組件在 state更改后也隨著更改，需要基于state創(chuàng)建計算屬性。
const Counter = {
template:

count () {
  return this.$store.state.count  // count 為某個狀態(tài)
}

}
}

getters
類似于 Vue 中的 計算屬性，可以在所以來的其他 state或者 getter改變后自動改變。
每個getter方法接受 state和其他getters作為前兩個參數(shù)。
getters: {

doneTodos: (state, getters) => {
  return state.todos.filter(todo => todo.done)
}

}

mutations
前面兩個都是狀態(tài)值本身，mutations才是改變狀態(tài)的執(zhí)行者。mutations用于同步地更改狀態(tài)
// ...
mutations: {
increment (state, n) {

state.count += n

}
}

其中，第一個參數(shù)是state，后面的其他參數(shù)是發(fā)起mutation時傳入的參數(shù)。
this.$store.commit("increment", 10)

commit方法的第一個參數(shù)是要發(fā)起的mutation名稱，后面的參數(shù)均當(dāng)做額外數(shù)據(jù)傳入mutation定義的方法中。
規(guī)范的發(fā)起mutation的方式如下：
store.commit({
type: "increment",
amount: 10 //這是額外的參數(shù)
})

額外的參數(shù)會封裝進一個對象，作為第二個參數(shù)傳入mutation定義的方法中。
mutations: {
increment (state, payload) {

state.count += payload.amount

}
}

actions
想要異步地更改狀態(tài),需要使用action。action并不直接改變state，而是發(fā)起mutation。
actions: {
incrementAsync ({ commit }) {

setTimeout(() => {
  commit("increment")
}, 1000)

}
}

發(fā)起action的方法形式和發(fā)起mutation一樣，只是換了個名字dispatch。
// 以對象形式分發(fā)
store.dispatch({
type: "incrementAsync",
amount: 10
})

action處理異步的正確使用方式
想要使用action處理異步工作很簡單，只需要將異步操作放到action中執(zhí)行（如上面代碼中的setTimeout）。
要想在異步操作完成后繼續(xù)進行相應(yīng)的流程操作，有兩種方式:

action返回一個 promise。
而dispatch方法的本質(zhì)也就是返回相應(yīng)的action的執(zhí)行結(jié)果。所以dispatch也返回一個promise。

store.dispatch("actionA").then(() => {
// ...
})

利用async/await。代碼更加簡潔。

// 假設(shè) getData() 和 getOtherData() 返回的是 Promise

actions: {
async actionA ({ commit }) {

commit("gotData", await getData())

},
async actionB ({ dispatch, commit }) {

await dispatch("actionA") // 等待 actionA 完成
commit("gotOtherData", await getOtherData())

}
}

各個功能與 Vue 組件結(jié)合
將state和getter結(jié)合進組件需要使用計算屬性：
computed: {

count () {
  return this.$store.state.count 
  // 或者 return this.$store.getter.count2
}

}

將mutation和action結(jié)合進組件需要在methods中調(diào)用this.$store.commit()或者this.$store.commit():
methods: {

changeDate () {
    this.$store.commit("change");
},
changeDateAsync () {
    this.$store.commit("changeAsync");
}

}

為了簡便起見，Vuex 提供了四個方法用來方便的將這些功能結(jié)合進組件。

mapState
mapGetters
mapMutations
mapActions

示例代碼：
import { mapState, mapGetters, mapMutations, mapActions } from "vuex"

// ....
computed: {
localComputed () { / ... / },
...mapState({

// 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)
count(state) {
  return state.count + this.localCount
}

}),
...mapGetters({

getterCount(state, getters) {
  return state.count + this.localCount
}

})
}
methods: {
...mapMutations({

   add: "increment" // 將 `this.add()` 映射為`this.$store.commit("increment")`
}),

...mapActions({

  add: "increment" // 將 `this.add()` 映射為 `this.$store.dispatch("increment")`
})

}

如果結(jié)合進組件之后不想改變名字，可以直接使用數(shù)組的方式。
methods: {

...mapActions([
  "increment", // 將 `this.increment()` 映射為 `this.$store.dispatch("increment")`

  // `mapActions` 也支持載荷：
  "incrementBy" // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch("incrementBy", amount)`
]),

}

將 store分割為模塊。
可以將應(yīng)用的store分割為小模塊，每個模塊也都擁有所有的東西:state, getters, mutations, actions。
首先創(chuàng)建子模塊的文件：
// initial state
const state = {
added: [],
checkoutStatus: null
}
// getters
const getters = {
checkoutStatus: state => state.checkoutStatus
}
// actions
const actions = {
checkout ({ commit, state }, products) {
}
}
// mutations
const mutations = {
mutation1 (state, { id }) {
}
}
export default {
state,
getters,
actions,
mutations
}

然后在總模塊中引入：
import Vuex from "vuex"
import products from "./modules/products" //引入子模塊

Vue.use(Vuex)
export default new Vuex.Store({
modules: {

products   // 添加進模塊中

}
})

其實還存在命名空間的概念，大型應(yīng)用會使用。需要時查看文檔即可。Vuex的基本使用大致如此。

作者：胡不歸vac
鏈接：https://www.jianshu.com/p/aae...
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處。