初次看到这个模块方式，感觉很是新奇，之前的vuex状态树使用方法用的也有些腻了，就想来实践一发新的东西
废话不多说，直接进入正题
Vuex状态树-模块方式官方文档解读
状态树还可以拆分成为模块，store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块
这句话啊，看了半天，我都没绕出来。之前一直用的是store目录下文件为：index.js、state.js、mutations.js、actions.js。后三个是index.js的子模块，你说这每个js文件都是一个模块？懵逼一分钟
继续往下：使用状态树模块化的方式，store/index.js 不需要返回 Vuex.Store 实例，而应该直接将 state、mutations 和 actions 暴露出来。 到这里我虽然还懵逼着，但是转念一想，nuxt还有这操作，都不用我们自己辛辛苦苦写export default store = () => new Vuex.Store({}) 了，倒也真的省事儿呢
还是继续看例子吧，官方给的这个，看了一遍没看懂（笨小孩的世界真滴难），你这index.js不是Vuex默认的store文件么，再来一todos.js，同样暴露出去的对象，不应该是index.js同级的么
重点来了，看不会不要紧，照猫画虎我还是会滴~
照猫画虎
// store/index.js export const state = () => ({ num: 0 }) export const mutations = { increment (state) { state.num ++ }, decrement (state) { state.num -- } } // store/plus.js export const state = () => ({ plusNum: 1 }) export const mutations = { plus (state) { state.plusNum ++ } } // store/minus.js export const state = () => ({ minusNum: 10 }) export const mutations = { minus (state) { state.minusNum -- } } // pages/store.vue <template> <section> <table> <tr> <td colspan=4>vuex状态树使用</td> </tr> <tr> <td>页内数据</td> <td>index.js</td> <td>plus.js</td> <td>minus.js</td> </tr> <tr> <td>{{ count }}</td> <td>{{ $store.state.num }}</td> <td>{{ $store.state.plus.plusNum }}</td> <td>{{ $store.state.minus.minusNum }}</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </section> </template>
跑一下，唷！报错了，我说同学们啊，我写的真的没有错！！！
好吧，报错内容：[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
意思是我客户端和vue SSR生成的DOM不一样，客户端不也是SSR生成的，这是个问题，有知道的大佬，希望可以告诉我。
不过这个问题我倒是解决了，虽然不知道问什么-_-！，把那一大堆的tr标签都放到tbody里面就OK了
跑起来，没问题，按示例的写法，这样成功拿到了state的数据
接着试试mutation的方法
<tr> <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> <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打印出来：