什么是狀態(tài)管理

在開發(fā)中，我們會的應用程序需要處理各種各樣的數(shù)據(jù)，這些 數(shù)據(jù)需要保存在我們應用程序中的某一個位置，對于這些數(shù)據(jù) 的管理我們就稱之為是狀態(tài)管理

Vuex 的狀態(tài)管理的基本實現(xiàn)（這里采用官方的圖解）

Vuex的使用

安裝vuex

npm install vuex

基本使用 :

store本質(zhì)上是一個容器 --> 存著大部分應用中的狀態(tài)。

vuex 的狀態(tài)存儲是響應式的，當store中的狀態(tài)發(fā)生變化時，那么響應的組件也會被更新。

// 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當前計數(shù): {{$store.state.counter}}</h2>
    <h2>方式二：optionsAPI中的computed使用: {{storeCounter}}</h2>
    <h2>方式三：在compositionAPI中setup函數(shù)使用:{{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>

單一狀態(tài)樹和mapState輔助函數(shù)

1. 單一狀態(tài)樹

意味著每一個應用就只包含一個 store實例

優(yōu)點：如果狀態(tài)信息包含了多個 store 實例對象，那么之后維護和管理起來就會比較麻煩。單一狀態(tài)樹是我們最直接的方式找到某一個狀態(tài)的片段，所以維護起來也比較方便

2. mapState輔助函數(shù)

? 如果需要獲取多個狀態(tài)的時候，可以使用 mapSate 輔助函數(shù)

這里有兩種方式，分別是在optionsAPI 和 composition API中使用 mapState

getters的基本使用

1. getter的使用

場景：當需要我們將store中的某些屬性經(jīng)過一些列的變化之后再使用，這個時候可以選擇使用getters

2. getters第二個參數(shù)

在上述場景中，getters接受的第一個參數(shù)是state，getters 也可以接收第二個參數(shù)

3. getters的返回函數(shù) (了解)

getters中的函數(shù)本身，可以返回一個函數(shù)，那么在使用的地方相當于可以調(diào)用這個函數(shù)

4. mapGetters的輔助函數(shù)

mutation基本使用

改變vuex中的store的狀態(tài)的唯一方法是提交mutation

注意：在pinia中是取消了mutation，后續(xù)會繼續(xù)講。搭配vue3的composition API會比vuex更好，所以這里使用 options API演示

1. mutation攜帶數(shù)據(jù)

很多時候我們在提交mutation的時候會攜帶一些數(shù)據(jù)，這個時候可以這樣使用

2. mutation重要原則

mutation 必須是同步函數(shù)，即不允許使用異步函數(shù)（例如發(fā)送網(wǎng)絡請求）

actions的基本使用

Action類似于mutation，不同在于：

• Action提交的是mutation，而不是直接變更狀態(tài)；
• Action可以包含任意異步操作；

參數(shù)context：

• context是一個和store實例均有相同方法和屬性的context對象；
• 可以從其中獲取到commit方法來提交一個mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters；

1. actions的分發(fā)操作

2. actions的輔助函數(shù)

3. actions的異步操作

module的基本使用

? 由于使用單一狀態(tài)樹，應用的所有狀態(tài)會集中到一個比較大的對象，當應用變得非常復雜時，store 對象就有可能變得相當臃腫。所以Vuex允許我們將 store 分割成模塊（module）。

? 每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊

1. module的局部狀態(tài)

對于模塊內(nèi)部的 mutation 和 getter，接收的第一個參數(shù)是模塊的局部狀態(tài)對象。

2. module的命名空間

? 默認情況下，模塊內(nèi)部的action和mutation仍然是注冊在全局的命名空間中的。所以命名不可以重復

? 如果我們希望模塊具有更高的封裝度和復用性，可以添加 namespaced: true 的方式使其成為帶命名空間的模塊： 當模塊被注冊后，它的所有 getter、action 及 mutation 都會自動根據(jù)模塊注冊的路徑調(diào)整命名。

3. module修改或派發(fā)根組件

? 在action中修改root中的state，那么有如下的方式：

到此這篇關于Vue詳細講解Vuex狀態(tài)管理的實現(xiàn)的文章就介紹到這了,更多相關Vue Vuex狀態(tài)管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論