import Vuex from "vuex";
import Vue from "vue";
import breadStore from "./breadStore.js"; //引入子模块
import auth from "./auth.js";
import createPersistedState from "vuex-persistedstate";
import settings from "./settings.js";
import themes from "./themes.js";
import menuTag from "./menuTag.js";
import dragChart from "./dragChart.js";
import vuexIndexedDBPlugin from "@/utils/vuexIndexedDBPlugin";
Vue.use(Vuex);
export const store = new Vuex.Store({
  state: {
    // 存放共有store下子模块数据
    //调用 this.$store.state.price
  },
  getters: {
    // state的计算属性，监听state的变化时对state里的数据进行加工
    //如果其他组件都需要相同的函数，就可以把函数写到这里面
    getterPrice(state) {
      return (state.price += 100);
    },
    permissions: (state) => state.auth.authBtnList,
    //调用this.$store.getters.getterPrice
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
  },
  actions: {
    // 提交mutation，但不直接改变变更数据状态，异步操作
  },
  // 如果将store分成一个个的模块的话，则需要用到modules。
  //然后在每一个module中写state, getters, mutations, actions等(注意在子模块中需要开启命名空间)。
  modules: {
    //面包屑模块
    breadStore,
    auth,
    settings,
    themes,
    menuTag,
    dragChart,
  },
  plugins: [
    createPersistedState({
      storage: window.sessionStorage, // 或者 localStorage
      paths: [
        "breadStore",
        "auth",
        "settings",
        "themes",
        "menuTag", // 指定需要持久化存储的模块，排除 dragChart
      ],
    }),
    vuexIndexedDBPlugin,
  ],
});