下面這篇是承接上一篇的內容的，如果沒看過上一篇的內容，建議先翻一下上一篇的內容vuex入門。咋們這篇的功能和上一篇的一樣，App.vue的內容沒改，改的只是將store.js整個檔案拆分成各個模組，下面是我拆分成各個js檔案一覽：

        在這裡，actions、getters和mutaions檔案我就不解釋了，下面解釋的是index.js和types.js檔案還有state狀態去哪了。首先state它是去了mutaions那裡方便管理。我們的這個index.js檔案是個入口檔案，也就相當於我們之前寫的store.js檔案，只不過裡面的actions、getters、mutaions和state都在別的模組裡需要匯入進來。而這個types.js檔案是配置一些方法名，方便actions.js和mutaions.js檔案的使用。

        首先我們在index.js裡是這樣子寫的

// 配置入口
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

import actions from './actions'
import mutations from './mutations'
export default new Vuex.Store({
  actions,
modules: {
    mutations
  }
})

        為什麼這裡沒有getters？為什麼這裡Vuex.Store裡面需要用到modules？接下來我慢慢講。然後App.vue裡面有兩個方法，我們就在types.js裡面這樣寫：

export const 
 
INCREMENT = 'increment'
export const DECREMENT = 'decrement'

        在actions.js中，我們可以通過這樣寫來將commit提交出去：

import * as types from './types'
// 或者可以這樣寫：
// import {INCREMENT, DECREMENT} from './types'
// 這個表示只是引出INCREMENT出來，上面那個帶星號的是把所有都引過來。
export default {
  increment: ({commit}) => {
    commit(types.INCREMENT)
  },
 
decrement: ({commit, state}) => {
    commit(types.DECREMENT)
    // 這裡想獲取state裡面的屬性要用下面這個寫法，因為state在mutaions模組裡
console.log(state.mutations.count)
  }
}

        mutaions.js檔案裡，需要將通過如下方式來獲取commit並進行操作。因為最後面匯出的模組有三個，所以在index.js裡需要用modules來裹著mutaions：

// 可以用這個方法來代替下面的匯入所有
// import {INCREMENT, DECREMENT} from './types'
import * as types from './types'
import getters from './getters'
const state = {
  count: 10
}

const mutations = {
  [types.INCREMENT]: (state) => {
    state.count++
  },
[types.DECREMENT]: (state) => {
    state.count--
  }
}

export default {
  mutations,
getters,
state
}

        而我們的getters.js檔案就是這樣寫：

export default {
  count: (state) => {
    return state.count
}
}

        最後，若想把state提取出去，應該這樣子寫法，index.js程式碼：

// 配置入口
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

import actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
export default new Vuex.Store({
  actions,
getters,
state,
mutations
})

        actions.js程式碼：

import * as types from './types'
// 或者可以這樣寫：
// import {INCREMENT, DECREMENT} from './types'
// 這個表示只是引出INCREMENT出來，上面那個帶星號的是把所有都引過來。
export default {
  increment: ({commit}) => {
    commit(types.INCREMENT)
  },
decrement: ({commit}) => {
    commit(types.DECREMENT)
  }
}

        mutations.js程式碼：

// 可以用這個方法來代替下面的匯入所有
// import {INCREMENT, DECREMENT} from './types'
import * as types from './types'
export default {
  [types.INCREMENT] (state) {
    state.count++
  },
[types.DECREMENT] (state) {
    state.count--
  }
}

        state.js程式碼：

const state = {
  count: 10
}

export default state

        getters程式碼：

export const count = state => state.count

        types.js程式碼：

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'