Vue3 的狀態管理主要是通過 Vuex 4 來實作，Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式，它采用集中式存盤管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化，
在Vue3的狀態管理中，以下是各個屬性的作用：
state：存盤應用程式中的狀態資料，它可以包含任何型別的資料，包括基本型別、物件、陣列等，可以通過commit和dispatch方法來修改state中的資料，getters：允許你基于 store 中的 state 資料進行計算，類似于Vue組件中的計算屬性，通過getters，我們可以將store中的狀態資料進行加工、過濾、處理后再回傳給組件使用，而無需在組件中手動操作state資料，mutations：用于修改store中的狀態資料，每個mutation都有一個字串的型別和一個handler函式，在handler函式中，我們可以進行同步操作來修改state中的資料，需要注意的是，mutations中的函式必須是同步函式，否則會導致狀態不可預測，actions：用于處理異步任務以及提交mutations，在actions中，我們可以撰寫異步代碼，例如向后端API發送請求獲取資料等操作，然后通過commit方法提交mutation，以更新state中的資料，actions中的函式是可以是異步函式的，因此我們可以在其中執行異步操作，modules：允許我們將store分割成模塊，每個模塊都有自己的state、mutations、actions、getters等，以便于管理和維護，每個模塊都可以有自己的子模塊，形成樹狀結構，
總的來說，狀態管理的主要作用是將組件中的狀態資料集中管理，從而避免了在不同組件之間傳遞大量的資料，同時，使用狀態管理可以使我們更好地組織代碼，將邏輯分離，提高代碼的可維護性和可讀性，
下面是一個簡單的示例，演示了如何在 Vue3 中使用 Vuex 4 來實作狀態管理，
首先，在專案中安裝 Vuex 4：
npm install vuex@next --save
然后，在應用程式的入口檔案中，創建一個 Vuex store 并匯出它：
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
count: 0
}
},
mutations: {
increment(state) {
state.count++
},
decrement(state) {
state.count--
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
},
getters: {
count(state) {
return state.count
}
}
})
export default store
在上面的示例中，createStore() 函式用于創建一個 Vuex store，在 state 物件中，定義了應用程式的狀態，這里只定義了一個 count 屬性，并初始化為 0，在 mutations 物件中，定義了修改狀態的方法，這里定義了兩個方法：increment 和 decrement，在 actions 物件中，定義了異步操作的方法，這里定義了一個名為 incrementAsync 的方法，它在 1 秒后呼叫 increment 方法，在 getters 物件中，定義了計算屬性的方法，這里定義了一個名為 count 的計算屬性，
接著，在應用程式的入口組件中，使用 useStore() 函式來注入 Vuex store：
<template>
<div>
<h1>Count: {{ count }}</h1>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
<button @click="incrementAsync">Increment Async</button>
</div>
</template>
<script>
import { defineComponent, useStore } from 'vue'
export default defineComponent({
setup() {
const store = useStore()
const increment = () => {
store.commit('increment')
}
const decrement = () => {
store.commit('decrement')
}
const incrementAsync = () => {
store.dispatch('incrementAsync')
}
return {
count: store.getters.count,
increment,
decrement,
incrementAsync
}
}
})
</script>
在上面的示例中，useStore() 函式用于注入 Vuex store，并將其賦值給 store 變數，然后，定義了三個方法：increment、decrement 和 incrementAsync，它們分別呼叫了 Vuex store 中定義的 increment、decrement 和 incrementAsync 方法，在組件的 return 陳述句中，使用 store.getters.count 訪問了計算屬性 count 的值，以供模塊呼叫，
Vue3提供了一個新的狀態管理工具，即Vuex 4，它與Vue3一起使用，可用于在應用程式中管理全域狀態，Vuex 4的設計目標是在減少樣板代碼的同時提高開發人員的作業效率和開發速度，
與Vuex 3相比，Vuex 4的一個重要改變是將核心代碼與Vue3的新回應式API集成在一起，這意味著你不需要使用getter和setter來宣告狀態或修改它們，而可以使用Vue3的新回應式API，
import { createStore } from 'vuex'
const counterModule = {
state() {
return {
count: 0
}
},
mutations: {
increment(state) {
state.count++
},
decrement(state) {
state.count--
}
},
actions: {
asyncIncrement(context) {
setTimeout(() => {
context.commit('increment')
}, 1000)
}
},
getters: {
doubledCount(state) {
return state.count * 2
}
}
}
const store = createStore({
modules: {
counter: counterModule
}
})
export default store
在這個例子中，我們使用createStore函式創建一個新的Vuex store，counterModule是一個包含計數器狀態的模塊，其中包含一個state物件，用于存盤計數器值，以及mutations、actions和getters物件，用于操作和派生計數器狀態，
最后，我們將計數器模塊添加到store中，以便在應用程式中訪問它，現在我們已經設定好了Vuex 4 store，我們可以在Vue3應用程式中使用它來管理全域狀態，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550466.html
標籤：其他