什麼是狀態管理？聊聊怎麼利用Vuex進行狀態管理

什麼是狀態管理？以下這篇文章帶大家了解Vuex狀態管理，聊聊怎麼利用Vuex進行狀態管理，希望對大家有幫助！

? 1. 什麼是狀態管理

在開發中，我們會的應用程式需要處理各種各樣的數據，這些數據需要保存在我們應用程式中的某一個位置，對於這些資料的管理我們就稱之為是狀態管理。 （學習影片分享：vue影片教學）

#Vuex 的狀態管理的基本實作（這裡採用官方的圖解）

⏰ Vuex的使用

1、安裝vuex

npm install 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 id="方式一-模板-App当前计数-store-state-counter">方式一：模板:App当前计数: {{$store.state.counter}}</h2>
    <h2 id="方式二-optionsAPI中的computed使用-storeCounter">方式二：optionsAPI中的computed使用: {{storeCounter}}</h2>
    <h2 id="方式三-在compositionAPI中setup函数使用-counter">方式三：在compositionAPI中setup函数使用:{{counter}}</h2>
    <button>+1</button>
  </div>
</template>

<script>
export default {
  computed: {
    storeCounter () {
      return this.store.state.counter
    }
  }
}
</script>

<script>
import { toRefs } from &#39;vue&#39;
import { useStore } from &#39;vuex&#39;

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，而不是直接變更狀態；

• 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，那麼有如下的方式：

（學習影片分享：

web前端開發、程式設計基礎影片）

以上是什麼是狀態管理？聊聊怎麼利用Vuex進行狀態管理的詳細內容。更多資訊請關注PHP中文網其他相關文章！