Vuex中狀態(tài)管理器怎么使用

本文小編為大家詳細介紹“Vuex中狀態(tài)管理器怎么使用”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“Vuex中狀態(tài)管理器怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一、Vuex是什么？

Vuex在Vue項目開發(fā)時使用的狀態(tài)管理工具。簡單來說，就是對Vue的應用中多個組件的共享狀態(tài)進行集中式的管理（讀/寫）

Vuex實現(xiàn)了一個單向數(shù)據(jù)流，在全局擁有一個State存放數(shù)據(jù)，當組件要更改State中的數(shù)據(jù)時，必須通過Mutation進行，Mutation同時提供了訂閱者模式供外部插件調(diào)用獲取State數(shù)據(jù)的更新。

而當所有異步操作(常見于調(diào)用后端接口異步獲取更新數(shù)據(jù))或批量的同步操作需要走Action，但Action也是無法直接修改State的，還是需要通過Mutation來修改State的數(shù)據(jù)。最后，根據(jù)State的變化，渲染到視圖上。

二、什么時候使用Vuex

不適用場景：小型簡單應用，用 Vuex 是繁瑣冗余的，更適合使用簡單的store模式

適用場景：構(gòu)建一個中大型單頁應用，可能會考慮如何更好地在組件外部管理狀態(tài)，即多個組件共享狀態(tài)：

多個視圖依賴于同一狀態(tài)：此時傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態(tài)傳遞無能為力。

來自不同視圖的行為需要變更同一狀態(tài)：此時采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝，通常會導致無法維護的代碼

在這些情況下就適合用Vuex進行全局單例模式管理

三、Vuex的核心概念和API

流程：View -> Actions -> Mutations -> State -> View

1、state

1) vuex 管理的狀態(tài)對象

2) 它應該是唯一的

const state = {
xxx: initValue
}

2、 mutations

1) 包含多個直接更新 state 的方法(回調(diào)函數(shù))的對象

2) 誰來觸發(fā): action 中的 commit('mutation 名稱')或者在組件中通過this.$store.commit(‘xxx’,params)使用。這個和組件中的自定義事件類似

3) 只能包含同步的代碼, 不能寫異步代碼

const mutations = {
xxx(state, {data1}) {
// 更新 state 的某個屬性
}
}

3、 actions

1) 提交 mutation，異步操作。包含多個事件回調(diào)函數(shù)的

2) 通過執(zhí)行: commit()來觸發(fā) mutation 的調(diào)用, 間接更新 state

3) 誰來觸發(fā): 組件中通過this.$store.dispatch('action 名稱', data1)

4) 可以包含異步代碼(axios)

const actions ={
zzz ({commit, state}, data1){
commit('xxx', {data1})
}
}

4、 getters

1) 對數(shù)據(jù)獲取之前的再次編譯，可以理解為state的計算屬性

2) 誰來讀取: 組件中: this.$store.getters.xxx

const getters ={
xxx(state) {
return ...
}
}

5、 modules

1) 包含多個 module:store的子模塊，為了開發(fā)大型項目，方便狀態(tài)管理而使用的，即將store分割為模塊，使store對象不會太臃腫。

2)一個 module 是一個 store 的配置對象

3) 與一個組件(包含有共享數(shù)據(jù))對應

四、應用舉例

1、安裝：npm i vuex -S

2、創(chuàng)建store：src/store/index.js

import { createStore} from "vuex";
export default createStore({
    //vuex中的數(shù)據(jù)源,我們需要保存的數(shù)據(jù)就保存在這里，可以在組件通過 this.$store.state來獲取我們定義的數(shù)據(jù)；
    state: {
        count: 0,
        age: 0
    },
    /*
      (1)Getter相當于vue中的computed計算屬性，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當它的依賴值發(fā)生了改變才會被重新計算
      (2)通過屬性訪問Getter會暴露為 store.getters 對象，可以以屬性的形式訪問這些值：this.$store.getters.xxx
      (3)Getters 可以用于監(jiān)聽state中的值的變化，返回計算后的結(jié)果
    */
    getters: {
        getterAge(state){
            return state.age =25
        }
    },
    /*
       更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation，并且Mutation 必須是同步函數(shù)
       在sotre.js中定義mutations對象，該對象中有兩個方法，mutations里面的參數(shù)，第一個默認為state，
       其中第二個參數(shù)obj在官方文檔就是載荷（payload），可以傳入?yún)?shù)及對象。
       在大多數(shù)情況下，載荷應該是一個對象，這樣可以包含多個字段并且記錄的 mutation 會更易讀
     */
    mutations: {
        addCount(state,obj){
            return state.count += obj.num
        },
        subCount(state,obj){
            return state.count -= obj.num
        }
    },
    actions: {
        addCountAsyn(context){
            setTimeout(()=>{
                context.commit('addCount',{
                    num: 1
                })
            },3000)
        },
        subCountAsyn(context){
            setTimeout(()=> {
                context.commit('subCount',{
                    num: 1
                })
            },2000)
        }
    }
})

3、在main.js文件中使用store

4、創(chuàng)建Home.vue組件

<template>
  <div>
    <h3>通過getter獲得計算后的年齡：{{ getterAge }}</h3>
    <p>Count：{{ count }}</p>
    <button @click="handlerAdd()">加1</button>
    <button @click="handlerSub()">減1</button>
    <button @click="handlerAddAnys()">異步增加(2s后執(zhí)行)</button>
    <button @click="handlerSubAnys()">異步減少(2s后執(zhí)行)</button>
  </div>
</template>
 
<script>
export default {
  name: "Home",
  computed: {
    count(){
      return this.$store.state.count
    },
    getterAge(){
      return this.$store.getters.getterAge
    }
   },
  methods: {
    handlerAdd(){
      this.$store.commit("addCount",{
        num: 1
      })
    },
    handlerSub(){
      this.$store.commit("subCount",{
        num: 1
      })
    },
    handlerAddAnys(){
      this.$store.dispatch('addCountAsyn')
    },
    handlerSubAnys(){
      this.$store.dispatch('subCountAsyn')
    }
   }
}
</script>

6、在App.vue中導入Home.vue

7、運行效果：

五、vuex中各種輔助函數(shù)的用法，可以使我們更加方便的運用vuex

1、…mapState

count(){
     return this.$store.state.count
},

等價于

...mapState([
  'count'
]),

2、…mapGetters

getterAge(){
  return this.$store.getters.getterAge
}

等價于

...mapGetters(['getterAge'])

3、…mapMutations：使用輔助函數(shù)后載荷的傳參，直接在調(diào)用的地方進行傳參便可

handlerAdd(){
  this.$store.commit("addCount",{
    num: 1
  })
},
handlerSub(){
  this.$store.commit("subCount",{
    num: 1
  })
},

等價于

...mapMutations({
  handlerAdd: 'addCount',
  handlerSub: 'subCount'
})

4、…mapActions

handlerAddAnys(){
  this.$store.dispatch('addCountAsyn')
},
handlerSubAnys(){
  this.$store.dispatch('subCountAsyn')
}

等價于

...mapActions({
  handlerAddAnys: 'addCountAsyn',
  handlerSubAnys: 'subCountAsyn'
})

修改上例中的Home.vue組件

讀到這里，這篇“Vuex中狀態(tài)管理器怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。