208 Organizing your Store with Modules

可以使用modules属性组织Store，首先将store根据模块划用一个变量分独立开来，然后在添加到Store中的module属性中

main.js

import { createApp } from 'vue';
import { createStore } from 'vuex';

import App from './App.vue';

const counterModule = {
  state() {
    return {
      counter: 0
    };
  },
  mutations: {
    increment(state) {
      state.counter += 2;
    },
    incrementBy(state, payload) {
      state.counter += payload.value;
    },
  },
  actions: {
    increment(context) {
      //setTimeout(() => {
      context.commit('increment');
      //}, 2000);
    },
    incrementBy(context, payload) {
      console.log('-----------------------');
      console.log(context);
      console.log('-----------------------');
      context.commit('incrementBy', payload);
    },
  },
  getters: {
    finalCounter(state) {
      return state.counter * 3;
    },
    //normalizedCounter(_, getters) { //if state is not needed, it can be replaced with _ to use second argument for getters
    normalizedCounter(state, getters) {
      const finalCounter = getters.finalCounter;
      if (finalCounter < 0) {
        return 0;
      }
      if (finalCounter > 100) {
        return 100;
      }
      return finalCounter;
    },
  }
};

const store = createStore({
  modules:{
    numbers: counterModule,
  },
  state() {
    return {
      isLoggedIn: false,
    };
  },
  mutations: {
    setAuth(state, payload) {
      state.isLoggedIn = payload.isAuth;
    }
  },
  actions: {
    login(context) {
      context.commit('setAuth', { isAuth: true });
    },
    logout(context) {
      context.commit('setAuth', { isAuth: false });
    }
  },
  getters: {
    userIsAuthenticated(state) {
      return state.isLoggedIn;
    },
  }
});

const app = createApp(App);

app.use(store);

app.mount('#app');