目錄
一良哲、State
二冶伞、Getters
三、Mutations
四恳蹲、Actions
五、Modules
六俩滥、vuex-persistedstate
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式嘉蕾。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化霜旧。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension (opens new window)错忱，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級調(diào)試功能挂据。
如果您不打算開發(fā)大型單頁應(yīng)用以清，使用 Vuex 可能是繁瑣冗余的。確實(shí)是如此——如果您的應(yīng)用夠簡單崎逃，您最好不要使用 Vuex掷倔。一個(gè)簡單的 store 模式 (opens new window)就足夠您所需了。但是个绍，如果您需要構(gòu)建一個(gè)中大型單頁應(yīng)用勒葱，您很可能會(huì)考慮如何更好地在組件外部管理狀態(tài)浪汪，Vuex 將會(huì)成為自然而然的選擇。
一凛虽、State
由于 Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的死遭，從 store 實(shí)例中讀取狀態(tài)最簡單的方法就是在計(jì)算屬性 (opens new window)中返回某個(gè)狀態(tài)：
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
setup () {
const store = useStore()
return {
count: computed(() => store.state.count)
}
}
}
二、Getters
Vuex 允許我們在 store 中定義“getter”（可以認(rèn)為是 store 的計(jì)算屬性）凯旋。就像計(jì)算屬性一樣呀潭，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算至非。
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
setup () {
const store = useStore()
return {
double: computed(() => store.getters.double)
}
}
}
三钠署、Mutations
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)睡蟋。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方踏幻，并且它會(huì)接受 state 作為第一個(gè)參數(shù)：
const store = createStore({
state: {
count: 1
},
mutations: {
increment (state) {
state.count++
}
}
})
你不能直接調(diào)用一個(gè) mutation handler。這個(gè)選項(xiàng)更像是事件注冊：“當(dāng)觸發(fā)一個(gè)類型為 increment 的 mutation 時(shí)戳杀，調(diào)用此函數(shù)该面。”要喚醒一個(gè) mutation handler信卡，你需要以相應(yīng)的 type 調(diào)用 store.commit 方法：
store.commit('increment')
四隔缀、Actions
Action 類似于 mutation，不同在于：
Action 提交的是 mutation傍菇，而不是直接變更狀態(tài)猾瘸。
Action 可以包含任意異步操作。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
Action 通過 store.dispatch 方法觸發(fā)：
store.dispatch('increment')
五丢习、Modules
由于使用單一狀態(tài)樹牵触，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)咐低，store 對象就有可能變得相當(dāng)臃腫揽思。
為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）见擦。每個(gè)模塊擁有自己的 state钉汗、mutation、action鲤屡、getter损痰、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割：
const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = createStore({
modules: {
a: moduleA,
b: moduleB
}
})
六、vuex-persistedstate
當(dāng)刷新頁面,項(xiàng)目重新加載,vuex 會(huì)重置,所有狀態(tài)回到初始狀態(tài),使用 vuex-persistedstate 可以避免這種情況酒来。
1卢未、安裝
npm install --save vuex-persistedstate
2、使用
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";
const store = new Vuex.Store({
plugins: [createPersistedState()],
});
