一、什麼是vuex module，為什麼要使用vuex模組化？

模組化，就是將vuex分為不同的模組，無論從專案上還是結構上，都容易維護，我們在平時寫的vuex中，都是在一個檔案中，寫state、getters、mutations、actions。想象一下，如果我們的專案特別大，比如淘寶那麼大，那麼我們vuex中要維護的內容會特別多的時候，例如“購物車”需要用到vuex，“設定”需要用到vuex，“首頁”也需要用到vuex，那麼如果我們都寫到一個檔案中，就會出現程式碼相當的“臃腫”。這一個store檔案最後好幾萬行程式碼。還怎麼維護？

所以，我們vue官網就給出了辦法，使用vuex模組化開發。

今天我們簡單學習使用，學會後，你要查閱官網，深入學習，才能提高這個技術。

模組化有很多寫法，今天按照我的習慣，簡單的寫一下，我們和以前一樣，需要下載vuex，會得到一個store資料夾，內部我們有一個index跟檔案。並且，我們需要自己建立一個modules資料夾，裡邊放入我們想要區分的js模組檔案，你想分成多少個模組，就分成多少個，我目前寫了倆個模組，一個是購物車car.js，一個是我的my.js，type.js先不用管。如圖：

首先我們需要先將modules中的所有檔案引入到index.js根檔案中（以前我們是匯出mutations等方法，現在這個檔案中，我只引入了模組，所以只需要匯出模組），如下：

import Vue from "vue";
import Vuex from "vuex";

// 引入兩個模組檔案
import car from './modules/car';
import my from './modules/my';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    car,
    my
  }
});