vue實踐05之vuex
getter方法
有時候我們需要從 store 中的 state 中派生出一些狀態，例如對列表進行過濾並計數：
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
複製程式碼如果有多個元件需要用到此屬性，我們要麼複製這個函式，或者抽取到一個共享函式然後在多處匯入它——無論哪種方式都不是很理想。
Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算。
- Getter 接受 state 作為其第一個引數：
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
add(state) {
state.count++;
},
reduce(state) {
state.count--;
}
},
getters: {
countAdd100: state => {
return state.count + 100
}
}
})
複製程式碼- 在元件中引入getters
import { mapState, getters } from "vuex";
3. 在元件中訪問getters
computed: {
countAdd1001() {
return this.$store.getters.countAdd100;
}
}
複製程式碼- mapGetters 輔助函式
mapGetters 輔助函式僅僅是將 store 中的 getter 對映到區域性計算屬性,要求區域性計算屬性和getter中定義的方法名一樣，類似mapState陣列。
computed: {
...mapGetters([
"countAdd100"
])
}
複製程式碼- 全部程式碼
- count.vue程式碼如下：
<template>
<div>
<h2>{{msg}}</h2>
<hr/>
<!--<h3>{{$store.state.count}}</h3>-->
<h6>{{countAdd100}}</h6>
<h6>{{countAdd1001}}</h6>
<div>
<button @click="$store.commit(`add`)">+</button>
<button @click="$store.commit(`reduce`)">-</button>
</div>
</div>
</template>
<script>
import store from "@/vuex/store";
import { mapState, getters, mapGetters } from "vuex";
export default {
data() {
return {
msg: "Hello Vuex"
};
},
computed: {
...mapGetters([
"countAdd100"
]),
countAdd1001() {
return this.$store.getters.countAdd100;
}
},
store
};
</script>
複製程式碼- store.js程式碼
import Vue from `vue`
import Vuex from `vuex`
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
add(state) {
state.count++;
},
reduce(state) {
state.count--;
}
},
getters: {
countAdd100: state => {
return state.count + 100
}
}
})
export default store
複製程式碼Mutation方法
- 更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似於事件：每個 mutation 都有一個字串的 事件型別 (type) 和 一個 回撥函式 (handler)。這個回撥函式就是我們實際進行狀態更改的地方，並且它會接受 state 作為第一個引數：
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 變更狀態
state.count++
}
}
})
複製程式碼你不能直接呼叫一個 mutation handler。這個選項更像是事件註冊：“當觸發一個型別為 increment 的 mutation 時，呼叫此函式。”要喚醒一個 mutation handler，你需要以相應的 type 呼叫 store.commit 方法：
store.commit(`increment`)
複製程式碼- 提交載荷（Payload）
你可以向 store.commit 傳入額外的引數，即 mutation 的 載荷（payload）：
mutations: {
increment (state, n) {
state.count += n
}
}
store.commit(`increment`, 10)
複製程式碼- 在大多數情況下，載荷應該是一個物件，這樣可以包含多個欄位並且記錄的 mutation 會更易讀：
<button @click="$store.commit(`incrementObj`,{amount:100})">+100</button>
<button @click="$store.commit({type:`incrementObj`,amount:1000})">+1000</button>
複製程式碼Action
- action定義
Action 類似於 mutation，不同在於：
- Action 提交的是 mutation，而不是直接變更狀態。
- Action 可以包含任意非同步操作。
下面程式碼中incrementAsync模擬了一個非同步操作。
actions: {
addAction({ commit }) {
commit("add")
},
reduceAction({ commit }) {
commit("reduce")
},
incrementAsync({ commit }) {
setTimeout(() => {
commit(`add`)
}, 1000)
}
}
複製程式碼Action 函式接受一個與 store 例項具有相同方法和屬性的 context 物件，因此你可以呼叫 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。當我們在之後介紹到 Modules 時，你就知道 context 物件為什麼不是 store 例項本身了。
mutation 必須同步執行這個限制麼？Action 就不受約束！我們可以在 action 內部執行非同步操作：
incrementAsync({ commit }) {
setTimeout(() => {
commit(`add`)
}, 1000)
}
複製程式碼- dispactch方法呼叫action
在元件中呼叫action，程式碼如下：
methods: {
increment(){
this.$store.dispatch("addAction");
},
decrement() {
this.$store.dispatch("reduceAction")
},
incrementAsync() {
this.$store.dispatch("incrementAsync")
}
}
複製程式碼- mapAactions方法呼叫action
首先引用mapActions,import { mapActions} from "vuex";
例項程式碼如下：
methods: {
...mapActions([
`addAction`, // 將 `this.increment()` 對映為 `this.$store.dispatch(`addAction`)`
// `mapActions` 也支援載荷：
`reduceAction` // 將 `this.incrementBy(amount)` 對映為 `this.$store.dispatch(`reduceAction`)`
]),
...mapActions({
asyncAdd: `incrementAsync` // 將 `this.asyncAdd()` 對映為 `this.$store.dispatch(`incrementAsync`)`
})
}
複製程式碼- 組合action
Action 通常是非同步的，那麼如何知道 action 什麼時候結束呢？更重要的是，我們如何才能組合多個 action，以處理更加複雜的非同步流程？
首先，你需要明白 store.dispatch 可以處理被觸發的 action 的處理函式返回的 Promise，並且 store.dispatch 仍舊返回 Promise：
定義action如下：
mutations: {
reduce(state) {
state.count--;
}
},
actions: {
actionA({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit(`reduce`)
resolve()
}, 1000)
})
}
}
複製程式碼元件中程式碼如下：
methods: {
decrement() {
this.$store.dispatch(`actionA`).then(() => {
console.log("先減1再加1")
this.incrementAsync()
})
},
incrementAsync() {
this.$store.dispatch("incrementAsync")
}
}
複製程式碼module模組組
由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的物件。當應用變得非常複雜時，store 物件就有可能變得相當臃腫。
為了解決以上問題，Vuex 允許我們將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組——從上至下進行同樣方式的分割：
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態
複製程式碼名稱空間
預設情況下，模組內部的 action、mutation 和 getter 是註冊在全域性名稱空間的——這樣使得多個模組能夠對同一 mutation 或 action 作出響應。
如果希望你的模組具有更高的封裝度和複用性，你可以通過新增 namespaced: true 的方式使其成為帶名稱空間的模組。當模組被註冊後，它的所有 getter、action 及 mutation 都會自動根據模組註冊的路徑調整命名。例如：
const store = new Vuex.Store({
modules: {
account: {
namespaced: true,
// 模組內容（module assets）
state: { ... }, // 模組內的狀態已經是巢狀的了，使用 `namespaced` 屬性不會對其產生影響
getters: {
isAdmin () { ... } // -> getters[`account/isAdmin`]
},
actions: {
login () { ... } // -> dispatch(`account/login`)
},
mutations: {
login () { ... } // -> commit(`account/login`)
},
// 巢狀模組
modules: {
// 繼承父模組的名稱空間
myPage: {
state: { ... },
getters: {
profile () { ... } // -> getters[`account/profile`]
}
},
// 進一步巢狀名稱空間
posts: {
namespaced: true,
state: { ... },
getters: {
popular () { ... } // -> getters[`account/posts/popular`]
}
}
}
}
}
})
複製程式碼上例中myPage和posts均是account的子module，但是myPage沒有設定名稱空間，所以myPage繼承了account的名稱空間。posts設定名稱空間，所以在訪問posts內部的getters時，需要新增全路徑。
實際執行程式碼如下：
const moduleA = {
namespaced: true,
state: { count: 10 },
mutations: {
increment(state) {
// 這裡的 `state` 物件是模組的區域性狀態
state.count++
}
},
getters: {
doubleCount(state) {
return state.count * 2
}
},
actions: {
incrementIfOddOnRootSum({ state, commit, rootState }) {
if ((state.count + rootState.count) % 2 === 1) {
commit(`increment`)
}
}
},
getters: {
sumWithRootCount(state, getters, rootState) {
return state.count + rootState.count
}
}
}
---在父節點中新增module定義
modules: {
a: moduleA
}
複製程式碼在vue中訪問定義的module
<button @click="$store.commit(`a/increment`)">double</button>
<button @click="doubleCount">doubleCount</button>
複製程式碼methods方法定義:
count() {
return this.$store.state.a.count
},
doubleCount() {
return this.$store.commit(`a/increment`)
}
複製程式碼