Vue3 的狀態(tài)管理主要是通過(guò) Vuex 4 來(lái)實(shí)現(xiàn)。Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式，它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。
在Vue3的狀態(tài)管理中，以下是各個(gè)屬性的作用：
-
state：存儲(chǔ)應(yīng)用程序中的狀態(tài)數(shù)據(jù)。它可以包含任何類型的數(shù)據(jù)，包括基本類型、對(duì)象、數(shù)組等?？梢酝ㄟ^(guò)commit和dispatch方法來(lái)修改state中的數(shù)據(jù)。 -
getters：允許你基于 store 中的 state 數(shù)據(jù)進(jìn)行計(jì)算。類似于Vue組件中的計(jì)算屬性。通過(guò)getters，我們可以將store中的狀態(tài)數(shù)據(jù)進(jìn)行加工、過(guò)濾、處理后再返回給組件使用，而無(wú)需在組件中手動(dòng)操作state數(shù)據(jù)。 -
mutations：用于修改store中的狀態(tài)數(shù)據(jù)。每個(gè)mutation都有一個(gè)字符串的類型和一個(gè)handler函數(shù)。在handler函數(shù)中，我們可以進(jìn)行同步操作來(lái)修改state中的數(shù)據(jù)。需要注意的是，mutations中的函數(shù)必須是同步函數(shù)，否則會(huì)導(dǎo)致狀態(tài)不可預(yù)測(cè)。 -
actions：用于處理異步任務(wù)以及提交mutations。在actions中，我們可以編寫異步代碼，例如向后端API發(fā)送請(qǐng)求獲取數(shù)據(jù)等操作。然后通過(guò)commit方法提交mutation，以更新state中的數(shù)據(jù)。actions中的函數(shù)是可以是異步函數(shù)的，因此我們可以在其中執(zhí)行異步操作。 -
modules：允許我們將store分割成模塊，每個(gè)模塊都有自己的state、mutations、actions、getters等，以便于管理和維護(hù)。每個(gè)模塊都可以有自己的子模塊，形成樹狀結(jié)構(gòu)。
總的來(lái)說(shuō)，狀態(tài)管理的主要作用是將組件中的狀態(tài)數(shù)據(jù)集中管理，從而避免了在不同組件之間傳遞大量的數(shù)據(jù)。同時(shí)，使用狀態(tài)管理可以使我們更好地組織代碼，將邏輯分離，提高代碼的可維護(hù)性和可讀性。
下面是一個(gè)簡(jiǎn)單的示例，演示了如何在 Vue3 中使用 Vuex 4 來(lái)實(shí)現(xiàn)狀態(tài)管理。
首先，在項(xiàng)目中安裝 Vuex 4：
npm install vuex@next --save
然后，在應(yīng)用程序的入口文件中，創(chuàng)建一個(gè) Vuex store 并導(dǎo)出它：
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() 函數(shù)用于創(chuàng)建一個(gè) Vuex store。在 state 對(duì)象中，定義了應(yīng)用程序的狀態(tài)，這里只定義了一個(gè) count 屬性，并初始化為 0。在 mutations 對(duì)象中，定義了修改狀態(tài)的方法，這里定義了兩個(gè)方法：increment 和 decrement。在 actions 對(duì)象中，定義了異步操作的方法，這里定義了一個(gè)名為 incrementAsync 的方法，它在 1 秒后調(diào)用 increment 方法。在 getters 對(duì)象中，定義了計(jì)算屬性的方法，這里定義了一個(gè)名為 count 的計(jì)算屬性。
接著，在應(yīng)用程序的入口組件中，使用 useStore() 函數(shù)來(lái)注入 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() 函數(shù)用于注入 Vuex store，并將其賦值給 store 變量。然后，定義了三個(gè)方法：increment、decrement 和 incrementAsync，它們分別調(diào)用了 Vuex store 中定義的 increment、decrement 和 incrementAsync 方法。在組件的 return 語(yǔ)句中，使用 store.getters.count 訪問(wèn)了計(jì)算屬性 count 的值，以供模塊調(diào)用。
?
?
Vue3提供了一個(gè)新的狀態(tài)管理工具，即Vuex 4。它與Vue3一起使用，可用于在應(yīng)用程序中管理全局狀態(tài)。Vuex 4的設(shè)計(jì)目標(biāo)是在減少樣板代碼的同時(shí)提高開發(fā)人員的工作效率和開發(fā)速度。
與Vuex 3相比，Vuex 4的一個(gè)重要改變是將核心代碼與Vue3的新響應(yīng)式API集成在一起。這意味著你不需要使用getter和setter來(lái)聲明狀態(tài)或修改它們，而可以使用Vue3的新響應(yīng)式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
在這個(gè)例子中，我們使用createStore函數(shù)創(chuàng)建一個(gè)新的Vuex store。counterModule是一個(gè)包含計(jì)數(shù)器狀態(tài)的模塊，其中包含一個(gè)state對(duì)象，用于存儲(chǔ)計(jì)數(shù)器值，以及mutations、actions和getters對(duì)象，用于操作和派生計(jì)數(shù)器狀態(tài)。
最后，我們將計(jì)數(shù)器模塊添加到store中，以便在應(yīng)用程序中訪問(wèn)它?，F(xiàn)在我們已經(jīng)設(shè)置好了Vuex 4 store，我們可以在Vue3應(yīng)用程序中使用它來(lái)管理全局狀態(tài)。
?
?
?
mutations的常用方法:
在Vue.js中，mutations是Vuex中用于修改狀態(tài)的方法。以下是一些常用的mutations方法：
- 增加或減少狀態(tài)值：
mutations: { increment(state) { state.count++; }, decrement(state) { state.count--; } }
- 更新狀態(tài)值：
mutations: { updateName(state, newName) { state.name = newName; } }
?
- 重置狀態(tài)：
mutations: { reset(state) { state.count = 0; state.name = ''; } }
?
- 更新對(duì)象類型的狀態(tài)屬性：
mutations: { updateUserInfo(state, newUserInfo) { state.user = { ...state.user, ...newUserInfo }; } }
?
- 更新數(shù)組類型的狀態(tài)屬性：
mutations: { addItem(state, newItem) { state.items.push(newItem); }, removeItem(state, index) { state.items.splice(index, 1); } }
?
- 使用payload來(lái)傳遞數(shù)據(jù)：
mutations: { updateValue(state, payload) { state.value = payload.newValue; } }
?
在這種情況下，payload是一個(gè)包含要傳遞給mutation的數(shù)據(jù)的對(duì)象。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-417746.html
這些是一些常見的mutations方法示例，你可以根據(jù)你的具體需求和應(yīng)用程序的狀態(tài)設(shè)計(jì)自定義的mutations方法。記住，mutations應(yīng)該是同步的，并且只負(fù)責(zé)修改狀態(tài)，而不應(yīng)該進(jìn)行異步操作。如果需要進(jìn)行異步操作，應(yīng)該使用actions來(lái)處理。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-417746.html
到了這里，關(guān)于vue全家桶進(jìn)階之路39：Vue3 狀態(tài)管理的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
