Vue詳細講解Vuex狀態管理的實現
什麼是狀態管理
在開發中，我們會的應用程序需要處理各種各樣的數據，這些 數據需要保存在我們應用程序中的某一個位置，對於這些數據 的管理我們就稱之為是狀態管理
Vuex 的狀態管理的基本實現（這裡采用官方的圖解）
Vuex的使用
安裝vuex
npm install vuex
基本使用 :
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 class="app">
<!-- store 中的counter -->
<h2>方式一：模板:App當前計數: {{$store.state.counter}}</h2>
<h2>方式二：optionsAPI中的computed使用: {{storeCounter}}</h2>
<h2>方式三：在compositionAPI中setup函數使用:{{counter}}</h2>
<button @click="increment">+1</button>
</div>
</template>
<script>
export default {
computed: {
storeCounter () {
return this.store.state.counter
}
}
}
</script>
<script setup>
import { toRefs } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const { counter } = toRefs(store.state)
function increment () {
store.commit("increment")
}
</script>
<style scoped></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，而不是直接變更狀態；
- Action可以包含任意異步操作；
參數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，那麼有如下的方式：
到此這篇關於Vue詳細講解Vuex狀態管理的實現的文章就介紹到這瞭,更多相關Vue Vuex狀態管理內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！