什麼是狀態管理？以下這篇文章帶大家了解Vuex狀態管理，聊聊怎麼利用Vuex進行狀態管理，希望對大家有幫助！
? 1. 什麼是狀態管理
在開發中，我們會的應用程式需要處理各種各樣的數據，這些數據需要保存在我們應用程式中的某一個位置，對於這些資料的管理我們就稱之為是狀態管理。 （學習影片分享：vue影片教學）
#Vuex 的狀態管理的基本實作（這裡採用官方的圖解）
⏰ Vuex的使用
1、安裝vuex
2、基本使用:
#store本質上就是一個容器--> 存著大部分應用中的狀態。
vuex 的狀態儲存是響應式的，當store中的狀態改變時，那麼回應的元件也會被更新。
// main.js
import { createApp } from "vue"
import App from "./App.vue"
import store from "./store"
const app = createApp(App)
app.user(store)
app.mount("#app")登入後複製
// src/store/index.js
import { createStore } from "vuex"
const store = createStore({
state: () => ({
counter: 100
}),
mutations: {
increment(state) {
state.counter++
}
}
})
export default store登入後複製
//App.vue
<template>
<div>
<!-- store 中的counter -->
<h2>方式一：模板:App当前计数: {{$store.state.counter}}</h2>
<h2>方式二：optionsAPI中的computed使用: {{storeCounter}}</h2>
<h2>方式三：在compositionAPI中setup函数使用:{{counter}}</h2>
<button>+1</button>
</div>
</template>
<script>
export default {
computed: {
storeCounter () {
return this.store.state.counter
}
}
}
</script>
<script>
import { toRefs } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const { counter } = toRefs(store.state)
function increment () {
store.commit("increment")
}
</script>
<style></style>登入後複製
? 單一狀態樹與mapState 輔助函數
1. 單一狀態樹
意味著每一個應用程式就只包含一個store實例
優點：如果狀態資訊包含了多個store 實例對象，那麼之後維護和管理起來就會比較麻煩。 單一狀態樹是我們最直接的方式找到某一個狀態的片段，所以維護起來也比較方便
2. mapState 輔助函數
如果需要取得多個狀態的時候，可以使用mapSate 輔助函數
這裡有兩種方式，分別是在optionsAPI 和composition API中使用mapState
#? getters 的基本使用量
1. getter 的使用
# #場景：當需要我們將store中的某些屬性經過一些列的變化之後再使用，這個時候可以選擇使用getters
2. getters 第二個參數
在上述場景中，getters接受的第一個參數是state，getters 也可以接收第二個參數
3. getters 的回傳函數(了解)
getters中的函數本身，可以傳回一個函數，那麼在使用的地方相當於可以呼叫這個函數
4. mapGetters 的輔助函數
? mutation 基本上使用
#改變vuex中的store的狀態的唯一方法是提交mutation注意：在pinia中是取消了mutation，後續會繼續講。搭配vue3的composition API會比vuex更好，所以這裡使用options API演示
1. mutation攜帶數據
很多時候我們在提交mutation的時候會攜帶一些數據，這個時候可以這樣使用
##2. mutation重要原則
mutation 必須是同步函數
，即不允許使用非同步函數（例如發送網路請求）
? actions 的基本使用
Action類似mutation，不同在於：
Action提交的是mutation，而不是直接變更狀態；
context
：
- context是一個和store實例均有相同方法和屬性的context物件；
- 可以從其中取得到commit方法來提交一個mutation，或者透過context.state 和context.getters 來取得state 和getters;
1. actions 的分發操作
##2. actions 的輔助函數
#3. actions 的非同步運算
#? module 的基本使用
由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象，當應用變得非常複雜時，store 對象就有可能變得相當臃腫。所以Vuex允許我們將 store 分割成模組（module）。 每個模組擁有自己的state、mutation、action、getter、甚至是巢狀子模組
#1. module 的局部狀態
對於模組內部的mutation 和getter，接收的第一個參數是模組的局部狀態物件。
2. module 的命名空間
預設情況下，模組內部的action和mutation仍然是註冊在全域的命名空間中的。 所以命名不可以重複
如果我們希望模組具有更高的封裝度和復用性，可以添加namespaced: true 的方式使其成為帶有命名空間的模組： 當模組註冊後，它的所有getter、action 及mutation 都會自動根據模組註冊的路徑調整命名。
3. module 修改或派髮根元件在action中修改root中的state，那麼有如下的方式：
（學習影片分享：web前端開發、程式設計基礎影片）
以上是什麼是狀態管理？聊聊怎麼利用Vuex進行狀態管理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
