Vuex中五個屬性以及使用方法詳解

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

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

Vuex介紹

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

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

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

使用方法：

可以通過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
})
// 每當 store.state.number 發(fā)生變化, 都會重新求取計算屬性，并且觸發(fā)更新相關聯(lián)的 DOM。

mapState輔助函數(shù)

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

mutations

提交mutation是更改Vuex中的store中的狀態(tài)的唯一方法。

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

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

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

使用方法;

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

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

mapMutations 輔助函數(shù)

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

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

actions

Action 類似于 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ù)接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。

使用方法：

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

this.$store.dispatch('increment')

mapActions輔助函數(shù)

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

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

Modules

使用單一狀態(tài)樹，導致應用的所有狀態(tài)集中到一個很大的對象。但是，當應用變得很大時，store 對象會變得臃腫不堪。

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

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 ,以此類推

mapGetters

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