為什麼需要Vuex模組化？

試想一個電商網站，頁面繁多，資料的部分前台會有購物車、商品、評價、促銷活動，後台部分有訂單、折扣碼、帳務等等等…眾多的資料如果都放在同一支 store，要不要個一千行？
為了防止這樣的情況，我們可以將我們的資料們依據自己的分類拆分成一個個模組，以便後續的管理維護。

來新增我們第一個模組吧

新增模組其實很~~簡單，比如說我想要新增一支專門用來管理次數的模組，以此為範例

• 新增模組檔案
  在 store 資料夾新增一支 count.js，裡面長這樣：

export default {
  state: {
    count: 0
  },
  mutations: {
    ADD_COUNT (state) {
      state.count += 1
    }
  },
  actions: {
    updateCount (context, status) {
      context.commit('ADD_COUNT', status)
    }
  }
}

我簡單說明以上內容

1. state 資料裡面存 count 次數
2. mutations 放更新 count 的方法
3. actions 呼叫 mutations 的方法以更新 count

• 與主要 store 綁定
  我們有模組後，當然要回去告訴我們主要檔案 store/index.js 一聲對吧！

import countModules from './count'

export default new Vuex.Store({
  modules: {
    countModules
  }
})

只要將我們的 count 模組 import 進來，並在 modules 新增即可唷！

• 在Vue元件中怎麼使用呢？

<template>
  <div id="app">
    <div>
      <button @click="updateCount">addCount</button><span>{{ count }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    updateCount () {
      this.$store.dispatch('updateCount')
    }
  },
  computed: {
    count () {
      return this.$store.state.countModules.count
    }
  }
}
</script>

我們在 methods 使用到了 count 模組的 action，使用方式不變，一樣用 dispatch 去呼叫即可。
但在 computed 中為了取得 count 的值，我們不是直接用 this.$store.state.count ，而是變成 this.$store.state.countModulest，這是為什麼呢？
因為有一個需要特別注意的地方！！！

在模組中，state預設為模組區域變數，而actions/mutations/getters預設為全域變數

所以我們要取得的不是 store.state 資料，而是他旗下模組 countModules 的資料，故而是使用this.$store.state.countModulest 唷！

結語

今天我們創建了我們第一個 vuex 模組，給自己掌聲鼓勵鼓勵！
明天我們在一起研究，關於模組中一些細節運用的方式吧！