Vue3 的狀態管理主要是通過 Vuex 4 來實現。Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式，它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。 在Vue3的狀態管理中，以下是各個屬性的作用： state：存儲應用程式中的狀態數據。它 ...
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應用程式中使用它來管理全局狀態。
