为何使用

当 website 逐渐变大之后，随之会使用到的同步非同步方法也会变多，需要在 Vuex 管理的变数也会变多。
这势必会让 store.js 档案变的杂乱、庞大、难以管理。
为了解决这个问题，将 store.js 的内容 切割成多只档案，在用 store.js 做引用。

Vue-Cli 模板範例

Github Repo Link

Vuex 特性 必须注意!!

states 属于 模组内 区域变数mutation, action, getter 属于全域变数 (同名会冲突，所以要用namespaced)

store.js Setup

store.js 内亦可撰写 state,mutation,actions注意! 写于 store.js 与 modules 的 state,mutations,actions 在元件中使用时的方法会不太相同

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 引入切割出来的内容，个人 开了一个 store 的资料夹用来存放 Vuex 相关的档案import exampleApi from './store/api/exampleApi'export default new Vuex.Store({  modules: {    // 载入该模块    exampleApi,  },  getters: {},  state: {    // 全域使用的才写这里    rootTest: 'rootTest',  },  // actions & mutation 首变数为 context 勿省略，次变数为 data 多参传物件 { }  mutations: {},  actions: {    // getUsers(context, data){ context.commit('mutationName', data ) }  },  strict: process.env.NODE_ENV !== 'production',})

元件内使用

先 import vuex全域的引用 & Modules (有设定 namespaced的) 写法有些差异

import { mapState, mapActions, mapMutations } from 'vuex'// 全域的引用用此...mapState(['rootTest']),// Modules 用此写法...mapState('testTemplate', ['test']),

Module Vuex 档案範例

namespaced: true 必加，因为 mutation, action, getter 属于全域变数会造成冲突注意 Module 的 Vuex export 为 单纯的物件!!!!

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default {  namespaced: true, // 必加避免冲突  getters: {},  state: {    rootTest: 'rootTest',  },  mutations: {},  actions: {    // getUsers(context, data){ context.commit('mutationName', data ) }  },  strict: process.env.NODE_ENV !== 'production',}

参考资料

Vuex 模组化
Vuex 专案範例
Vuex 模组化(精)