初次看到這個(gè)模塊方式，感覺很是新奇，之前的vuex狀態(tài)樹使用方法用的也有些膩了，就想來實(shí)踐一發(fā)新的東西

廢話不多說，直接進(jìn)入正題

Vuex狀態(tài)樹-模塊方式官方文檔解讀

狀態(tài)樹還可以拆分成為模塊，store 目錄下的每個(gè) .js 文件會(huì)被轉(zhuǎn)換成為狀態(tài)樹指定命名的子模塊

1. 這句話啊，看了半天，我都沒繞出來。之前一直用的是store目錄下文件為：index.js、state.js、mutations.js、actions.js。后三個(gè)是index.js的子模塊，你說這每個(gè)js文件都是一個(gè)模塊？懵逼一分鐘
2. 繼續(xù)往下：使用狀態(tài)樹模塊化的方式，store/index.js 不需要返回 Vuex.Store 實(shí)例，而應(yīng)該直接將 state、mutations 和 actions 暴露出來。 到這里我雖然還懵逼著，但是轉(zhuǎn)念一想，nuxt還有這操作，都不用我們自己辛辛苦苦寫export default store = () => new Vuex.Store({}) 了，倒也真的省事兒呢
3. 還是繼續(xù)看例子吧，官方給的這個(gè)，看了一遍沒看懂（笨小孩的世界真滴難），你這index.js不是Vuex默認(rèn)的store文件么，再來一todos.js，同樣暴露出去的對(duì)象，不應(yīng)該是index.js同級(jí)的么
4. 重點(diǎn)來了，看不會(huì)不要緊，照貓畫虎我還是會(huì)滴~

照貓畫虎

// store/index.jsexport const state = () => ({ num: 0}) export const mutations = { increment (state) {  state.num ++ }, decrement (state) {  state.num -- }}  // store/plus.jsexport const state = () => ({ plusNum: 1}) export const mutations = { plus (state) {  state.plusNum ++ }} // store/minus.jsexport const state = () => ({ minusNum: 10}) export const mutations = { minus (state) {  state.minusNum -- }} // pages/store.vue<template> <section class="container">  <table>    <tr>      <td colspan=4>vuex狀態(tài)樹使用</td>    </tr>    <tr>      <td>頁(yè)內(nèi)數(shù)據(jù)</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>

跑一下，唷！報(bào)錯(cuò)了，我說同學(xué)們啊，我寫的真的沒有錯(cuò)！！！

好吧，報(bào)錯(cuò)內(nèi)容：[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生成的，這是個(gè)問題，有知道的大佬，希望可以告訴我。

不過這個(gè)問題我倒是解決了，雖然不知道問什么-_-！，把那一大堆的tr標(biāo)簽都放到tbody里面就OK了

跑起來，沒問題，按示例的寫法，這樣成功拿到了state的數(shù)據(jù)

接著試試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>

報(bào)錯(cuò)：[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>

搞定~

自己先小結(jié)下這個(gè)模塊怎么用的吧

nuxt很貼心的幫我們省去了返回Vuex實(shí)例的代碼，我們可以不用去寫了
只有store文件夾下的index.js是一級(jí)的vuex狀態(tài)，其他的js文件都是二級(jí)的狀態(tài)樹。（能不能有三級(jí)的我不知道，不過感覺沒必要，哈哈哈！！）

每個(gè)狀態(tài)樹文件都可以包含state，mutation，action

使用二級(jí)狀態(tài)樹的state用： $store.state.文件名.變量名

使用二級(jí)狀態(tài)樹的mutation用： $store.commit(‘文件名/變量名')

使用二級(jí)狀態(tài)樹的action用： $store.dispatch(‘文件名/變量名')

官方示例沒有提到的

二級(jí)狀態(tài)樹能調(diào)用一級(jí)狀態(tài)樹的state和mutation以及action嗎？

我們來給plus.js增加一個(gè)修改index.js中的state的方法plusIndex

export const state = () => ({ plusNum: 1}) export const mutations = { plus (state) {  state.plusNum ++ }, plusIndex (state) {  state.num ++  console.log('點(diǎn)擊遞增index的num') }}

去試著調(diào)用了一下，文本打印出來了，也沒有報(bào)錯(cuò)，但是完全獲取不到index中的num哇~~

這次聰明點(diǎn)兒，我直接把state打印出來：

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

跑一下試試： 結(jié)果有點(diǎn)兒讓人想哭：state: {num: NaN, plusNum: 1}。再看看頁(yè)面上index.js對(duì)應(yīng)的num依然是0，這就說明我們這里的num不是index.js里的num，而是下面state ‘.'(點(diǎn))出來的num，并且沒有給初始值就執(zhí)行了一次 ++ ，所以值為NaN

到這里，我已經(jīng)大概猜測(cè)到了這里的彎彎繞是怎么回事兒了