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

意思是我客户端和vue SSR生成的DOM不一样，客户端不也是SSR生成的，这是个问题，有知道的大佬，希望可以告诉我。

不过这个问题我倒是解决了，虽然不知道问什么-_-！，把那一大堆的tr标签都放到tbody里面就OK了

跑起来，没问题，按示例的写法，这样成功拿到了state的数据

接着试试mutation的方法

<tr class="mutation-fun">
  <td @click="count ++">count ++</td>
  <td @click="$store.commit('increment')">increment</td>
  <td @click="$store.commit('plus')">plus</td>
  <td @click="$store.commit('minus')">minus</td>
</tr>

报错：[vuex] unknown mutation type: plus

修改下：

<tr class="mutation-fun">
  <td @click="count ++">count ++</td>
  <td @click="$store.commit('increment')">increment</td>
  <td @click="$store.commit('plus/plus')">plus/plus</td>
  <td @click="$store.commit('minus/minus')">minus/minus</td>
</tr>

搞定~

自己先小结下这个模块怎么用的吧

nuxt很贴心的帮我们省去了返回Vuex实例的代码，我们可以不用去写了
只有store文件夹下的index.js是一级的vuex状态，其他的js文件都是二级的状态树。（能不能有三级的我不知道，不过感觉没必要，哈哈哈！！）

每个状态树文件都可以包含state，mutation，action

使用二级状态树的state用： $store.state.文件名.变量名

使用二级状态树的mutation用： $store.commit(‘文件名/变量名’)

使用二级状态树的action用： $store.dispatch(‘文件名/变量名’)

官方示例没有提到的

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

我们来给plus.js增加一个修改index.js中的state的方法plusIndex

export const state = () => ({
 plusNum: 1
})
export const mutations = {
 plus (state) {
  state.plusNum ++
 },
 plusIndex (state) {
  state.num ++
  console.log('点击递增index的num')
 }
}

去试着调用了一下，文本打印出来了，也没有报错，但是完全获取不到index中的num哇~~

这次聪明点儿，我直接把state打印出来：

export const state = () => ({
 plusNum: 1
})
export const mutations = {
 plus (state) {
  state.plusNum ++
 },
 plusIndex (state) {
  console.log('state: ', state)
  state.num ++
 }
}

跑一下试试： 结果有点儿让人想哭：state: {num: NaN, plusNum: 1}。再看看页面上index.js对应的num依然是0，这就说明我们这里的num不是index.js里的num，而是下面state ‘.'(点)出来的num，并且没有给初始值就执行了一次 ++ ，所以值为NaN