nuxt 使用vuex在模块中无法调用全局的store

在模块中actions无法调用其他模块的mutations

使用nuxt官方的普通方式创建vuex状态树，在store目录下分别创建index.js和todo.js、test.js

index.js

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment(state) {
    state.counter++
  }
}

test.js

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment(state) {
    state.counter++
  }
}

todo.js

export const state = () => ({
  list: []
})

export const mutations = {
  add(state, text) {
    state.list.push({
      text,
      done: false
    })
  }
}
export const actions = {
    toggle(context,params) {
       context.commit("add","执行当前模块的mutations") ;//正常
       context.commit("increment","执行全局的mutations",{root:true}) ;//会报找不到/todo/increment的错误
       //如果不是index.js模块 是命名叫test.js模块
       context.commit("test/increment","执行全局的mutations",{root:true}) ;//会报找不到/todo/test/increment的错误
    } 
}

会发现在actions中无法调用其他模块的mutations,加了第三个参数{root:true}同样是无效果

解决方法

方法一.使用经典模式，用{root:true}就可以实现,但是nuxt官方声称将在 Nuxt 3 中删除经典模式，所以为了兼容后续不建议使用

index.js

import Vuex from 'vuex'
import todo from './modules/todo'
import test from './modules/test'

export default new Vuex.Store({
    state:{
        counter: 0
    },
    mutations:{
         increment(state) {
            state.counter++
         }            
    },
    modules:{
        todo,
        test
    }
})

test.js

const test = {
   state:{
        counter: 0
    },
    mutations:{
         increment(state) {
            state.counter++
         }            
    }
}
export default test

todo.js

const todo = {
    state:{
        list: []
    },
    mutations:{
       add(state, text) {
        state.list.push({
          text,
          done: false
        })
       }
    },
    actions:{
       toggle(context,params) {
         context.commit("add","执行当前模块的mutations") ;//正常
         context.commit("increment","执行全局的mutations",{root:true});//正常
         //如果不是index.js模块 是命名叫test.js模块
         context.commit("test/increment","执行全局的mutations",{root:true}) ;//正常
      } 
    }
}
export default todo

方式二.在调用actions的时候把全局this.$store当作参数传进去

index.js

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment(state) {
    state.counter++
  }
}

test.js

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment(state) {
    state.counter++
  }
}

todo.js

export const state = () => ({
  list: []
})

export const mutations = {
  add(state, text) {
    state.list.push({
      text,
      done: false
    })
  }
}
export const actions = {
    toggle(context,{$store,num}) {
       context.commit("add","执行当前模块的mutations") ;//正常
       $store.commit("increment","执行全局的mutations") ;//正常
       //如果不是index.js模块 是命名叫test.js模块
       $store.commit("test/increment","执行全局的mutations") ;//正常
    } 
}

vue文件

this.$store.dispatch('todo/toggle',{$store:this.$store,num:1})

这样传参数总感觉还是很繁琐，但是目前也只找到这个本方法 只能期待官方可以升级兼容