211 Structuring Vuex Code & Files

结构化store部分代码

main.js

import { createApp } from 'vue';

import App from './App.vue';
import store from './store/index.js'


const app = createApp(App);

app.use(store);

app.mount('#app');

store/index.js

import { createStore } from 'vuex';
import rootMutations from './mutations.js';
import rootActions from './actions.js';
import rootGetters from './getters.js';
import counterModule from './counter/index.js';


const store = createStore({
    modules: {
        numbers: counterModule,
    },
    state() {
        return {
            isLoggedIn: false,
        };
    },
    mutations: rootMutations,
    actions: rootActions,
    getters: rootGetters
});

export default store;

counter/index.js

import counterMutations from './mutations.js'
import counterActions from './actions.js'
import counterGetters from './getters.js'

const counterModule = {
    namespaced: true,
    state() {
      return {
        counter: 0
      };
    },
    mutations: counterMutations,
    actions: counterActions,
    getters: counterGetters
  };
  
  export default counterModule;