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

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

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設,那曲企業(yè)網(wǎng)站建設,那曲品牌網(wǎng)站建設,網(wǎng)站定制,那曲網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,那曲網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

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

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

Vuex的使用

1、安裝vuex

npm install vuex

2、基本使用 :

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 -->
    <h3>方式一：模板:App當前計數(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)樹 和 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，那么有如下的方式：

以上就是“如何利用Vuex進行狀態(tài)管理”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞名稱：如何利用Vuex進行狀態(tài)管理
路徑分享：http://muchs.cn/article0/ijdhoo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、定制網(wǎng)站、ChatGPT、靜態(tài)網(wǎng)站、網(wǎng)站設計、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)