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

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

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

Vuex的使用

安裝vuex

npm install vuex

基本使用 :

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

vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的，當(dāng)store中的狀態(tài)發(fā)生變化時(shí)，那么響應(yīng)的組件也會(huì)被更新。

// 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當(dāng)前計(jì)數(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)樹(shù)和mapState輔助函數(shù)

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

意味著每一個(gè)應(yīng)用就只包含一個(gè) store實(shí)例

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

2. mapState輔助函數(shù)

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

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

getters的基本使用

1. getter的使用

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

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

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

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

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

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

mutation基本使用

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

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

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

很多時(shí)候我們?cè)谔峤籱utation的時(shí)候會(huì)攜帶一些數(shù)據(jù)，這個(gè)時(shí)候可以這樣使用

2. mutation重要原則

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

actions的基本使用

Action類似于mutation，不同在于：

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

參數(shù)context：

• context是一個(gè)和store實(shí)例均有相同方法和屬性的context對(duì)象；
• 可以從其中獲取到commit方法來(lái)提交一個(gè)mutation，或者通過(guò) context.state 和 context.getters 來(lái)獲取 state 和 getters；

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

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

3. actions的異步操作

module的基本使用

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

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

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

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

2. module的命名空間

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

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

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

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

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

最新評(píng)論