快捷導(dǎo)航

Vue中狀態(tài)管理器(vuex)詳解以及實(shí)際應(yīng)用場景

更新時(shí)間：2022年11月14日 11:09:38 作者：明天也要努力

Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于Vue中狀態(tài)管理器(vuex)詳解以及實(shí)際應(yīng)用場景的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

Vue中常見的組件通信方式可分為三類

父子通信

父向子傳遞數(shù)據(jù)是通過 props，子向父是通過 events（$emit）；
通過父鏈 / 子鏈也可以通信（$parent / $children）；
ref 也可以訪問組件實(shí)例；
provide / inject；
$attrs/$listeners；

兄弟通信

Bus；
Vuex；

跨級通信

Bus；
Vuex；
provide / inject、
$attrs / $listeners、

Vuex簡介

當(dāng)我們的應(yīng)用遇到多個(gè)組件共享狀態(tài)時(shí)，單向數(shù)據(jù)流的簡潔性很容易被破壞：

問題一：多個(gè)視圖依賴于同一狀態(tài)。

問題二：來自不同視圖的行為需要變更同一狀態(tài)。

對于問題一，傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態(tài)傳遞無能為力。

對于問題二，我們經(jīng)常會采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝。以上的這些模式非常脆弱，通常會導(dǎo)致無法維護(hù)的代碼。

因此，我們?yōu)槭裁床话呀M件的共享狀態(tài)抽取出來，以一個(gè)全局單例模式管理呢？

在這種模式下，我們的組件樹構(gòu)成了一個(gè)巨大的“視圖”，不管在樹的哪個(gè)位置，任何組件都能獲取狀態(tài)或者觸發(fā)行為！

通過定義和隔離狀態(tài)管理中的各種概念并通過強(qiáng)制規(guī)則維持視圖和狀態(tài)間的獨(dú)立性，我們的代碼將會變得更結(jié)構(gòu)化且易維護(hù)。

這就是 Vuex 背后的基本思想，借鑒了 Flux、Redux 和 The Elm Architecture。與其他模式不同的是，Vuex 是專門為 Vue.js 設(shè)計(jì)的狀態(tài)管理庫，以利用 Vue.js 的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來進(jìn)行高效的狀態(tài)更新。

1. State

vuex中的數(shù)據(jù)源，我們需要保存的數(shù)據(jù)就保存在這里，在頁面通過 this.$store.state來獲取我們定義的數(shù)據(jù)；

store\index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:10
  }
})

views\about.vue

<template>
  <div class="about">
    <h1>state:{{this.$store.state.count}}</h1>
  </div>
</template>

效果：

2. Getters

Getter 相當(dāng)于 vue 中的 computed 計(jì)算屬性，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計(jì)算;

我們可以通過定義 vuex 的 Getter 來獲取，Getters 可以用于監(jiān)聽、state中的值的變化，返回計(jì)算后的結(jié)果；

這里我們修改 views\about.vue 文件如下：

<template>
  <div class="about">
    <h1>getters:{{this.$store.getters.changeCount}}</h1>
    <h1>state:{{this.$store.state.count}}</h1>
  </div>
</template>

再修改 store\index.js 文件如下，其中g(shù)etters中的getStateCount方法接收一個(gè)參數(shù)state，這個(gè)參數(shù)就是我們用來保存數(shù)據(jù)的那個(gè)對象；

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:10
  },
  getters:{
    changeCount(state){
      return state.count + 1
    }
  }
})

效果：

3. Mutations

如果需要修改 store 中的值唯一的方法就是提交 mutation 來修改；

我們現(xiàn)在 views\about.vue 文件中添加兩個(gè)按鈕，一個(gè)加1，一個(gè)減1；

這里我們點(diǎn)擊按鈕調(diào)用 addCount 和 reduceCount，然后在里面直接提交 mutations 中的方法修改值；

<template>
  <div class="about">
    <h1>getters:{{this.$store.getters.changeCount}}</h1>
    <h1>state:{{this.$store.state.count}}</h1>
    <button @click="addCount"> + </button>
    <button @click="reduceCount"> - </button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      n:10
    }
  },
  methods:{
    addCount(){
      this.$store.commit('add',this.n) // 傳遞參數(shù)
    },
    reduceCount(){
      this.$store.commit('reduce')
    } 
  }
}
</script>

修改 store\index.js 文件，添加 mutations，在 mutations 中定義兩個(gè)函數(shù)，用來對count加1和減1，這里定義的兩個(gè)方法就是上面commit提交的兩個(gè)方法如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:10
  },
  getters:{
    changeCount(state){
      return state.count + 1
    }
  },
  mutations: {
    add(state,n){
      state.count = state.count + n
    },
    reduce(state){
      state.count = state.count - 1
    }
  }
})

效果：

4. Actions

通過 mutations ,我們達(dá)到了修改store中狀態(tài)值的目的;

但是，mutation只能是同步，action 可以包含任意異步操作,在actions中提交mutation再去修改狀態(tài)值;

接下來我們修改 store\index.js文件：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:10
  },
  getters:{
 	 changeCount:state => state.count + 1
  },
  mutations: {
    add(state,n){
      state.count = state.count + n
    },
    reduce(state){
      state.count = state.count - 1
    }
  },
  actions: {
    addFun(context,n){
      context.commit('add',n) // 傳遞參數(shù)
    },
    reduceFun(context){
      context.commit('reduce')
    }
  }
})

然后我們?nèi)バ薷膙iews\about.vue文件：

<template>
  <div class="about">
    <h1>getters:{{this.$store.getters.changeCount}}</h1>
    <h1>state:{{this.$store.state.count}}</h1>
    <button @click="addCount"> + </button>
    <button @click="reduceCount"> - </button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      n:10
    }
  },
  methods:{
    addCount(){
      this.$store.dispatch('addFun',this.n) // 傳遞參數(shù)
    },
    reduceCount(){
      this.$store.dispatch('reduceFun')
    }  
  }
}
</script>

效果：

5. 使用 mapState、mapGetters、mapActions 簡化

如果我們不喜歡這種在頁面上使用 “this. s t r o e . s t a t e . c o u n t ” 和 “ t h i s . stroe.state.count” 和 “this. stroe.state.count”和“this.store.dispatch(‘funName’)” 這種很長的寫法，

那么我們可以使用 mapState、mapGetters、mapActions 就不會這么麻煩了；

我們修改 views\about.vue 文件如下：

<template>
  <div class="about">
    <h1>getters:{{this.$store.getters.changeCount}}</h1>
    <h1>通過mapGetters獲取:{{changeCount}}</h1>
    <h1>通過mapState獲取:{{count}}</h1>
    <h1>state:{{this.$store.state.count}}</h1>
    <button @click="addCount"> + </button>
    <button @click="reduceCount"> - </button>
  </div>
</template>

<script>
import {mapGetters,mapActions,mapState} from 'vuex'
export default {
  data(){
    return {
      n:10
    }
  },
  computed:{
    ...mapState({
      count:state => state.count
    }),
    ...mapGetters([
      'changeCount'
    ])
  },
  methods:{
    ...mapActions(
      {reduceCount:'reduceFun'},
    ),
    addCount(){
      this.$store.dispatch('addFun',this.n)
    },
    // reduceCount(){
    //   this.$store.dispatch('reduceFun')
    // }  
  }
}
</script>

效果：