如何利用Vuex進(jìn)行狀態(tài)管理

今天小編給大家分享一下如何利用Vuex進(jìn)行狀態(tài)管理的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

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

在開(kāi)發(fā)中，我們會(huì)的應(yīng)用程序需要處理各種各樣的數(shù)據(jù)，這些 數(shù)據(jù)需要保存在我們應(yīng)用程序中的某一個(gè)位置，對(duì)于這些數(shù)據(jù) 的管理我們就稱之為是狀態(tài)管理。（學(xué)習(xí)視頻分享：vue視頻教程）

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

Vuex的使用

1、安裝vuex

npm install vuex

2、基本使用 :

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 -->
    <h3>方式一：模板:App當(dāng)前計(jì)數(shù): {{$store.state.counter}}</h3>
    <h3>方式二：optionsAPI中的computed使用: {{storeCounter}}</h3>
    <h3>方式三：在compositionAPI中setup函數(shù)使用:{{counter}}</h3>
    <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，那么有如下的方式：

以上就是“如何利用Vuex進(jìn)行狀態(tài)管理”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。