nuxt踩坑之Vuex状态树的模块方式使用详解

到这里，我已经大概猜测到了这里的弯弯绕是怎么回事儿了 –> 模块儿的作用域是本文件内。但编程不是靠猜的，要用实践证明的才是对的，下面在深究这个问题

反过来，一级状态树能调用二级状态树的state和mutation以及action吗？

这里的情况跟上面一样，既然我们的这个store是模块方式生成的，那就要遵循模块化的规范，变量作用域只能在文件内

通过模块化编程规范来获取一级状态树的state

先把index.js引过来，因为不放心引用过来的还是不是原来那个index.js，所以把它打印出来看看

const indexVuex = require('./index.js')
console.log('indexVuex: ', indexVuex)

这下不就炸了嘛，我引过来的居然是一个空的vuex状态树！！！内容长这样子

{
  mutation: {},
  modules: {
    plus: {
      mutation: {},
      namespaced: true
    },
    minus: {
      mutation: {},
      namespaced: true
    }
  },
  namespaced: true
}

好吧，我这个用模块化的方式来使用其他文件内的变量的想法也是泡汤了

最后的让步，我在组件中调用状态树时再去用二级状态树的方法修改一级状态树的state，先试试：

// plus.js
export const state = () => ({
 plusNum: 1
})
export const mutations = {
 plus (state) {
  state.plusNum ++
 },
 plusIndex (state, meio) {
  meio ++
  console.log('meio: ', meio)
 }
}
// 调用：
<td @click="$store.commit('plus/plusIndex', $store.state.num)">递增index的num</td>

点击后，依然没能修改index.js中的num，查看打印结果中一直都是1，也就是说我们传进去的是基本数据类型的0~~

那修改一下，我们传进去一个引用数据类型的看看可以不

// plus.js
export const state = () => ({
 plusNum: 1
})
export const mutations = {
 plus (state) {
  state.plusNum ++
 },
 plusIndex (state, meio) {
  meio.num ++
  console.log('meio: ', meio.num)
 }
}
// 调用：
<td @click="$store.commit('plus/plusIndex', $store.state)">递增index的num</td>

功夫不负有心人，终于是成功了，虽然这样很麻烦，但也起到了效果

这里经验证：反过来一级状态树调用二级状态树也是一样的，代码就不贴了

小结一下

vuex状态树的模块写法，不同的文件之间不能直接引用
vuex状态树使用模块加载引用，得到的是一组命名空间，而不是最终生成的Vuex模块文件
要通过b文件修改其他文件的state需要在store外部去修改