Vuex子模塊調用子模塊的actions或mutations實現(xiàn)方式

更新時間：2023年10月27日 08:41:37 作者：Gik99

這篇文章主要介紹了Vuex子模塊調用子模塊的actions或mutations實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vuex子模塊調用子模塊的actions或mutations

項目場景

Vuex中子模塊如何調用子模塊的actions或mutations

問題描述

因為有的子模塊開啟了命名空間,其他子模塊不能直接訪問

如果子模塊沒有開啟命名空間,默認mutations和actions是掛載到全局上都可以直接調用

這是準備調用的子模塊代碼 permission.js

const state = {}
const mutations = {}
const actions = {}
}
export default {
  namespaced: true, // 開啟命名空間
  state,
  mutations,
  actions
}

解決方案

使用 {root:true}

調用的子模塊的代碼

const actions = {
  async lgout(context) {
    // 調用 permission 另一子模塊下的方法
    context.commit('permission/setRoutes', [], { root: true })
  }
}

vuex中actions和mutations區(qū)別

定義：

在Vuex中，actions和mutations是兩個核心概念，用于管理應用程序狀態(tài)的變化。

Mutations

mutations是用于修改Vuex狀態(tài)的唯一方法。

它們是同步操作，意味著它們必須是純函數(shù)，以確保狀態(tài)的可預測性。

這意味著mutations應該只用于同步操作，例如在響應用戶事件時更新狀態(tài)。

它們不應該包含任何異步代碼，如API調用。

舉個例子，下面的代碼演示了如何定義一個名為increment的mutation，用于將state中的count屬性增加

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

store.commit('increment') // 調用mutation

Actions

actions用于執(zhí)行異步操作或包含異步操作的操作序列。

它們可以包含任何異步代碼，例如API調用或其他異步操作，但不能直接修改狀態(tài)。

相反，它們通過commit觸發(fā)mutations來間接修改狀態(tài)。

舉個例子，下面的代碼演示了如何定義一個名為fetchData的action，它會異步獲取數(shù)據并提交mutation來更新狀態(tài)：

const store = new Vuex.Store({
  state: {
    data: null
  },
  mutations: {
    setData(state, data) {
      state.data = data
    }
  },
  actions: {
    async fetchData({ commit }) {
      const response = await fetch('https://api.example.com/data')
      const data = await response.json()
      commit('setData', data)
    }
  }
})

store.dispatch('fetchData') // 調用action

總之，mutations和actions有不同的角色和職責。

mutations用于同步狀態(tài)的修改，actions用于執(zhí)行異步操作并間接修改狀態(tài)。