vuex使用指南（轉(zhuǎn)載）

Freeman 發(fā)布于2019-08-23 17:19 / 1394人閱讀

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

使用
在 Vue 的單頁面應(yīng)用中使用，需要使用Vue.use(Vuex)調(diào)用插件。
使用非常簡(jiǎn)單，只需要將其注入到Vue根實(shí)例中。
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 是一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對(duì)象

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

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

Vuex 主要有四部分：

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

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

{{ count }}

,
computed: {

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

}
}

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

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

}

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

state.count += n

}
}

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

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

額外的參數(shù)會(huì)封裝進(jìn)一個(gè)對(duì)象，作為第二個(gè)參數(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一樣，只是換了個(gè)名字dispatch。
// 以對(duì)象形式分發(fā)
store.dispatch({
type: "incrementAsync",
amount: 10
})

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

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

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

利用async/await。代碼更加簡(jiǎn)潔。

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

actions: {
async actionA ({ commit }) {

commit("gotData", await getData())

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

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

}
}

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

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

}

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

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

}

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

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é)合進(jìn)組件之后不想改變名字，可以直接使用數(shù)組的方式。
methods: {

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

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

}

將 store分割為模塊。
可以將應(yīng)用的store分割為小模塊，每個(gè)模塊也都擁有所有的東西: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
}