快速掌握Vue3.0中如何上手Vuex狀態管理
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 www.cppcns.comdefault { 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 時,呼叫此函式。”要喚醒一個 www.cppcns.commutation 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 方法觸發:
sELjPUVtore.dispatch('increment')
五、Modules
由於使用單一狀態樹,應用的所有狀態會集中到一個比較大的物件。當應用變得非常複雜時,store 物件就有可能變得相當臃腫。
為了解決以上問題,Vuex 允許我們將 store 分割成模組(module)。每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組——從上至下進行同樣方式的分割:
const moduleA = { state: () => ({ ... }),mutations: { ... },actions: { ... },getters: { ... } } const moduleB = { state: () => ({ ... }),actions: { ... } } const store = createStore({ modules: { a: moduleA,b: moduleB } })
六、vuex-persistedstate
當重新整理頁面,專案重新載入,vuex 會重置,所有狀態回到初始狀態,使用 vuex-persistedstate 可以避免這種情況。
1、安裝
npm instELjPUVall --save vuex-persistedstate
2、使用
import Vuex from "vuex"; import createPersistedState from "vuex-persistedstate"; const store = new Vuex.Store({ plugins: [createPersistedState()],});
以上就是Vue3.0中如何快速上手Vuex狀態管理的詳細內容,更多關於Vuex狀態管理的資料請關注我們其它相關文章!