记录vuex使用

store-index.js代码如下

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";// vuex 持久化插件

import user from "./modules/auth";
import capacity from "./modules/capacity";
import capacityNew from "./modules/capacityNew";
Vue.use(Vuex);
export default new Vuex.Store({
  modules: {
    user,
    capacity,
    capacityNew,
  },
  // 持久化插件，配置。 todo 可以加入数据加密/解密
  plugins: [
    createPersistedState({
      key: "capacityNewStore", // storage中的key
      storage: window.localStorage, // 选择数据持久化到哪里（即storage对象指向）
      paths: ["capacityNew", "user"], // 选择对哪些模块进行持久化（如果没有这个参数，就是全部数据都保存）
      getState(key, storage, value) {
        // 获取storage中数据放入vuex中
        return (value = storage.getItem(key)) && typeof value == "undefined"
          ? {}
          : JSON.parse(value);
      },
      setState(key, state, storage) {
        // 保存vuex数据，每次mutations被调用时触发
        return storage.setItem(key, JSON.stringify(state));
      },
    }),
  ],
});

store-modules-user.js

import Vue from "vue";

const state = () => ({
  user: '',
});

const getters = {
  getUser(state) {
    return state.user;
  }
};

const mutations = {
  setUser(state, user) {
    state.user = user;
  }
};

const actions = {
  getUapInfo({ commit, dispatch }) {
    return Vue.prototype.$ajax.get(Vue.prototype.$urls.getCurrentUserInfo);
  },
};
export default {
  namespaced: true, //用于在全局引用此文里的方法时标识这一个的文件名
  state,
  mutations,
  actions,
  getters,
};

使用时

import { mapMutations, mapActions, mapGetters } from "vuex";
  computed: {
    ...mapGetters("user", ["getUser"]),
  },
   methods: {
    ...mapMutations("user", ["setUser"]),
   },
    mounted() {
      this.setUser('dd');
      //this.$store.commit("user/setUser", 'dd');
    },