vuex中五大屬性和使用說(shuō)明(包括輔助函數(shù))

更新時(shí)間：2023年05月25日 09:47:14 作者：學(xué)后端的小蘿卜頭

這篇文章主要介紹了vuex中五大屬性和使用說(shuō)明(包括輔助函數(shù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vuex有五個(gè)核心概念

state
getters
mutations
actions
modules

1.state

vuex的基本數(shù)據(jù)，用來(lái)存儲(chǔ)變量

// state存儲(chǔ)基本數(shù)據(jù)
state: {
    userId: '',
  }

在vue中使用 this.$store.state.userId

我們可以通過(guò)Vue的Computed獲得Vuex的state

// An highlighted block
const store = new Vuex.Store({
    state: {
        count:0
    }
})
const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        }
    },
    //..
})

mapState輔助函數(shù)

當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余。

為了解決這個(gè)問(wèn)題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性，讓你少按幾次鍵。

// 映射計(jì)算屬性
computed: mapState([
  // 映射 this.count 為 store.state.count
  'count'
])

2.geeter

從基本數(shù)據(jù)(state)派生的數(shù)據(jù)，相當(dāng)于state的計(jì)算屬性,具有返回值的方法

// getter
getter: {
    userIdDouble: function(state){
      return state.userId * 2
  }

在vue中使用 this.$store.getters.userIdDouble

與state一樣，我們也可以通過(guò)Vue的Computed獲得Vuex的getters。

getters接收state作為其第一個(gè)參數(shù)，接受其他 getters 作為第二個(gè)參數(shù)，如不需要，第二個(gè)參數(shù)可以省略如下例子：

const store = new Vuex.Store({
  state: {
      count:0
  }，
  getters: {
      // 單個(gè)參數(shù)
      countDouble: function(state){
          return state.count * 2
      },
      // 兩個(gè)參數(shù)
      countDoubleAndDouble: function(state, getters) {
          return getters.countDouble * 2
      }
  }
})

mapGetters 輔助函數(shù)

與state一樣，我們也可以通過(guò)Vue的Computed獲得Vuex的getters

const app = new Vue({
   //..
   store,
   computed: {
       count: function(){
           return this.$store.state.count
       },
       countDouble: function(){
           return this.$store.getters.countDouble
       },
       countDoubleAndDouble: function(){
           return this.$store.getters.countDoubleAndDouble
       }
   },
   //..
})

3. mutation

提交更新數(shù)據(jù)的方法，必須是同步的(如果需要異步使用action)。

每個(gè) mutation 都有一個(gè)字符串的事件類(lèi)型 (type) 和一個(gè) 回調(diào)函數(shù) (handler)。提交mutation是更改Vuex中的store中的狀態(tài)的唯一方法。

mutation必須是同步的，如果要異步需要使用action。

每個(gè) mutation 都有一個(gè)字符串的事件類(lèi)型 (type) 和一個(gè) 回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)，提交載荷作為第二個(gè)參數(shù)。（提交荷載在大多數(shù)情況下應(yīng)該是一個(gè)對(duì)象）,提交荷載也可以省略的

// mutations
 mutations: {
   SET_USER: (state, userId) => {
     state.userId = userId
   },
 },

commit：同步操作，寫(xiě)法： this. s t o r e . c o m m i t ( ‘ m u t a t i o n s 方法名 ’ , 值 ) t h i s . store.commit(‘mutations方法名’,值) this. store.commit(‘mutations方法名’,值)this.store.commit(‘SET_USER’,‘123456’)

使用mapMutations–代替 $store.commit()- 傳參的時(shí)候直接在行內(nèi)寫(xiě)參數(shù)就可以了-

mapMutations 輔助函數(shù)

與其他輔助函數(shù)類(lèi)似，你可以在組件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用（需要在根節(jié)點(diǎn)注入 store）。

//
import { mapMutations } from 'vuex'
export default {
//..
methods: {
  ...mapMutations([
    'increment' // 映射 this.increment() 為 this.$store.commit('increment')
  ]),
  ...mapMutations({
    add: 'increment' // 映射 this.add() 為 this.$store.commit('increment')
  })
}
}

4. action

和mutation的功能大致相同，不同之處在于 ==》

1. Action 提交的是 mutation，而不是直接變更狀態(tài)。

2. Action 可以包含任意異步操作。Action 類(lèi)似于 mutation，不同在于：Action 提交的是 mutation，而不是直接變更狀態(tài)。Action 可以包含任意異步操作。

// actions
actions: { // {} 是es6中解構(gòu)，把對(duì)象解構(gòu)成屬性
  login({ commit }, value) {
    commit('SET_USER', value)
    // commit('SET_TOKEN', value2)
  },
  }

dispatch：異步操作，寫(xiě)法：

this.$store.dispatch(‘mutations方法名',值)

mapActions輔助函數(shù)

你在組件中使用 this.$store.dispatch(‘xxx’) 分發(fā) action，或者使用 mapActions 輔助函數(shù)將組件的 methods 映射為 store.dispatch 調(diào)用（需要先在根節(jié)點(diǎn)注入 store）:

// An highlighted block
import { mapActions } from 'vuex'
export default {
  //..
  methods: {
    ...mapActions([
      'incrementN' //映射 this.incrementN() 為 this.$store.dispatch('incrementN')
    ]),
    ...mapActions({
      add: 'incrementN' //映射 this.add() 為 this.$store.dispatch('incrementN')
    })
  }
}