Vuex 是一個專為 Vue.js 應用程式開發的狀态管理模式。它采用集中式存儲管理應用的所有元件的狀态,并以相應的規則保證狀态以一種可預測的方式發生變化。Vuex 也內建到 Vue 的官方調試工具 devtools,提供了諸如零配置的 time-travel 調試、狀态快照導入導出等進階調試功能。
如果您不打算開發大型單頁應用,使用 Vuex 可能是繁瑣備援的。确實是如此——如果您的應用夠簡單,您最好不要使用 Vuex。一個簡單的 store 模式就足夠您所需了。但是,如果您需要建構一個中大型單頁應用,您很可能會考慮如何更好地在元件外部管理狀态,Vuex 将會成為自然而然的選擇。
一、State
由于 Vuex 的狀态存儲是響應式的,從 store 執行個體中讀取狀态最簡單的方法就是在計算屬性中傳回某個狀态:
import { computed } from 'vue'import { useStore } from 'vuex'export default { setup () { const store = useStore() return { count: computed(() => store.state.count) } }}
二、Getters
Vuex 允許我們在 store 中定義“getter”(可以認為是 store 的計算屬性)。就像計算屬性一樣,getter 的傳回值會根據它的依賴被緩存起來,且隻有當它的依賴值發生了改變才會被重新計算。
import { computed } from 'vue'import { useStore } from 'vuex'export default { setup () { const store = useStore() return { double: computed(() => store.getters.double) } }}
三、Mutations
更改 Vuex 的 store 中的狀态的唯一方法是送出 mutation。Vuex 中的 mutation 非常類似于事件:每個 mutation 都有一個字元串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀态更改的地方,并且它會接受 state 作為第一個參數:
const store = createStore({ state: { count: 1 }, mutations: { increment (state) { state.count++ } }})
你不能直接調用一個 mutation handler。這個選項更像是事件注冊:“當觸發一個類型為 increment 的 mutation 時,調用此函數。”要喚醒一個 mutation handler,你需要以相應的 type 調用 store.commit 方法:
store.commit('increment')
四、Actions
Action 類似于 mutation,不同在于:
Action 送出的是 mutation,而不是直接變更狀态。
Action 可以包含任意異步操作。
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } }})
Action 通過 store.dispatch 方法觸發:
store.dispatch('increment')
五、Modules
由于使用單一狀态樹,應用的所有狀态會集中到一個比較大的對象。當應用變得非常複雜時,store 對象就有可能變得相當臃腫。
為了解決以上問題,Vuex 允許我們将 store 分割成子產品(module)。每個子產品擁有自己的 state、mutation、action、getter、甚至是嵌套子子產品——從上至下進行同樣方式的分割:
const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, getters: { ... }}const moduleB = { state: () => ({ ... }), mutations: { ... }, actions: { ... }}const store = createStore({ modules: { a: moduleA, b: moduleB }})
六、vuex-persistedstate
當重新整理頁面,項目重新加載,vuex 會重置,所有狀态回到初始狀态,使用 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()],});