快捷導(dǎo)航

Vuex中五個(gè)屬性以及使用方法詳解

更新時(shí)間：2023年09月11日 08:36:00 作者：擺爛的胡蘿卜

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

Vuex介紹

vuex是專(zhuān)門(mén)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)，管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

state 數(shù)據(jù)存貯
getter state的計(jì)算屬性
mutation 更改state中狀態(tài)的邏輯同步操作
action 提交mutation 異步操作
model 模塊化

state基本數(shù)據(jù)，存儲(chǔ)變量

使用方法：

可以通過(guò)this.$store.state 獲得Vuex的state，如下：

//    src/store/index
const store = new Vuex.Store({
    state: {
        number:66
    }
})
const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.number
        }
    },
    // this.$store.state.number
})
// 每當(dāng) store.state.number 發(fā)生變化, 都會(huì)重新求取計(jì)算屬性，并且觸發(fā)更新相關(guān)聯(lián)的 DOM。

mapState輔助函數(shù)

// 在需要使用的文件里
import { mapState } from 'vuex'
export default {
  // ...
  methods:{
 ...mapState({ myNumber: 'number' }),
} 
}

mutations

提交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ì)象）,提交荷載也可以省略的。

const store = new Vuex.Store({
  state: {
    number: 1
  },
  mutations: {
    //無(wú)提交載荷
    Submit(state) {
        state.number++
    }
    //提交載荷
    SubmitN(state, payload) {
      state.number += payload.num
    }
  }
})

使用方法;

你不能直接調(diào)用一個(gè) mutation handler。這個(gè)選項(xiàng)更像是事件注冊(cè)：“當(dāng)觸發(fā)一個(gè)類(lèi)型為 Submit 的 mutation 時(shí)，調(diào)用此函數(shù)。”要喚醒一個(gè) mutation handler，你需要以相應(yīng)的 type 調(diào)用 store.commit 方法：

//無(wú)提交載荷
this.$store.commit('Submit')
//提交載荷
this.$store.commit('SubmitN', {
    num: 66
    })

mapMutations 輔助函數(shù)

與其他輔助函數(shù)類(lèi)似，你可以在組件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用。

// 在需要使用的文件里
import { mapMutations } from 'vuex'
export default {
? ? methods:{
    ...mapMutations({ mySubmit: 'Submit', mySubmitN: 'SubmitN'}),
}

actions

Action 類(lèi)似于 mutation，不同在于：

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

Action 可以包含任意異步操作。

const store = new Vuex.Store({
  state: {
    number: 0
  },
  mutations: {
    submit (state) {
      state.number++
    }
  },
  actions: {
    submit (context) {
      setInterval(function(){
        context.commit('submit')
      }, 1000)
    }
  }
})

注意：Action 函數(shù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對(duì)象，因此你可以調(diào)用 context.commit 提交一個(gè) mutation，或者通過(guò) context.state 和 context.getters 來(lái)獲取 state 和 getters。

使用方法：

分發(fā)actions，即Action 通過(guò) store.dispatch 方法觸發(fā)：

this.$store.dispatch('increment')

mapActions輔助函數(shù)

你在組件中使用 this.$store.dispatch('xxx') 分發(fā) action，或者使用 mapActions 輔助函數(shù)將組件的 methods 映射為 store.dispatch 調(diào)用

import { mapActions } from 'vuex'
export default {
  //..
  methods: {
    ...mapActions([
      'submit' 
    ]),
    ...mapActions({
      add: 'submit' 
    })
  }
}

Modules

使用單一狀態(tài)樹(shù)，導(dǎo)致應(yīng)用的所有狀態(tài)集中到一個(gè)很大的對(duì)象。但是，當(dāng)應(yīng)用變得很大時(shí)，store 對(duì)象會(huì)變得臃腫不堪。

為了解決以上問(wèn)題，Vuex 允許我們將 store 分割到模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getters、甚至是嵌套子模塊——從上至下進(jìn)行類(lèi)似的分割：

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user
  },
  getters
})
export default store

使用模塊化的state，mutations,action，需在使用方法前加模塊名

如：

this.$store.state.user.number

this.$store.commit(‘user/xxx’)

this.$store.dispatch(‘user/xxx’)

getters

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
  getters
})
export default store

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  username: state => state.user.username,
  empno: state => state.user.empno
}
export default getters

使用：this.$store.grtters.sidber , this.$store.grtters.device ,以此類(lèi)推

mapGetters

import { mapGetters } from 'vuex'
// mapGetters的作用：把getters映射為計(jì)算屬性
computed: {
    ...mapGetters(['getPartList']),
    // ...mapGetters({
    //   calcList: 'getPartList'
    // }),
    // calcList () {
    //   // 注意：獲取getters的值，不需要加括號(hào)（當(dāng)屬性使用）
    //   return this.$store.getters.getPartList
    // },
}