nuxt踩坑之Vuex狀態樹的模塊方式怎么用

這篇文章主要介紹了nuxt踩坑之Vuex狀態樹的模塊方式怎么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

Vuex狀態樹-模塊方式官方文檔解讀

狀態樹還可以拆分成為模塊，store 目錄下的每個 .js 文件會被轉換成為狀態樹指定命名的子模塊

1. 這句話啊，看了半天，我都沒繞出來。之前一直用的是store目錄下文件為：index.js、state.js、mutations.js、actions.js。后三個是index.js的子模塊，你說這每個js文件都是一個模塊？懵逼一分鐘

2. 繼續往下：使用狀態樹模塊化的方式，store/index.js 不需要返回 Vuex.Store 實例，而應該直接將 state、mutations 和 actions 暴露出來。 到這里我雖然還懵逼著，但是轉念一想，nuxt還有這操作，都不用我們自己辛辛苦苦寫export default store = () => new Vuex.Store({}) 了，倒也真的省事兒呢

3. 還是繼續看例子吧，官方給的這個，看了一遍沒看懂（笨小孩的世界真滴難），你這index.js不是Vuex默認的store文件么，再來一todos.js，同樣暴露出去的對象，不應該是index.js同級的么

4. 重點來了，看不會不要緊，照貓畫虎我還是會滴~

照貓畫虎

// 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 class="container">
  <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 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

到這里，我已經大概猜測到了這里的彎彎繞是怎么回事兒了 –> 模塊兒的作用域是本文件內。但編程不是靠猜的，要用實踐證明的才是對的，下面在深究這個問題

反過來，一級狀態樹能調用二級狀態樹的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>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“nuxt踩坑之Vuex狀態樹的模塊方式怎么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!