8. Vuex 文件结构

Vuex 组织文件结构

• 概述

  由于 state 、getters 、mutations 、actions 和 modules 都放在 store 文件夹的 index.js 文件内，不便于后期维护。故将 index 文件内容进行抽离。

• 文件结构

  

• 文件内容

  • store/index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    import module_a from "@/store/modules/module_a";
    import module_b from "@/store/modules/module_b";
    import getters from "@/store/getters";
    import mutations from "@/store/mutations";
    import actions from "@/store/actions";
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
        state: {
            data_1: 1,
            data_2: 2,
            data_3: 3
        },
        getters,
        mutations,
        actions,
        modules: {
            a: module_a,
            b: module_b
        }
    })
    
    export default store
    

  • store/getters.js

    export default {
        total(state) {
            let total=0
            for(let key in state){
                total += state[key]
            }
            return total
        }
    }
    

  • store/mutations.js

    export default {
        increment(state) {
            state.data_1++
        }
    }
    

  • store/actions.js

    export default {
        asyncIncrement(context) {
            setTimeout(()=>{
                context.commit('increment')
            }, 1000)
        }
    }
    

  • store/modules/module_a.js

    export default {
        state: ()=>{
    
        }
    }
    

  • store/mudules/module_b.js

    export default {
        state: ()=>{
    
        }
    }