Vuex代码文件规划

https://blog.csdn.net/weixin_41229588/article/details/105991201

上一篇文章续

直接上图

部分文件有省略。只需要看关键代码即可。

 index.js文件结构

import Vue from 'vue';
import Vuex from 'vuex';
import message from './modules/message';
import relailer from './modules/relailer';
import user from './modules/user';
import seller from './modules/seller';
import order from './modules/order';
import getters from './getters';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    message,
    relailer,
    user,
    seller,
    order
  },
  getters
});

export default store;

getters.js文件结构

const getters = {
  // 按需要来，首先state.message.messageNumber 的意思是state下的message模块下的messageNumber
  messageNumber: state => state.message.messageNumber,
  relailerId: state => state.relailer.relailerId,
  sellerId: state => state.seller.sellerId,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  nickName: state => state.user.nickName,
  userId: state => state.user.userId,
  language: state => state.user.language
};
export default getters;

其他文件格式都是一致的 举一个例子即可 

import { setLocalStorage, getLocalStorage } from '@/utils/local-storage';
const { relailerId } = getLocalStorage('relailerId');
const relailer = {
  state: {
    relailerId
  },
  mutations: {
    SET_ID: (state, code) => {
      state.relailerId = code;
    },
    GET_ID: (state, code) => {
      state.relailerId = code;
    },
    DEL_ID: (state, code) => {
      state.relailerId = code;
    }
  },

  actions: {
    // 获取经销商ID
    setrelailerId({ commit }, data) {
      if (data !== undefined) {
        setLocalStorage({
          relailerId: data
        });
        commit('SET_ID', data);
      }
    }
  }
};

export default relailer;

通常我会引入本地存储。

既然vuex是管理数据状态的为啥还要引入本地存储呢？

有的时候用户刷新页面，原来管理的变量数字就恢复成初始了，这可不是我们想要的。

比如购物车，比如用户头像

通过开始

const { relailerId } = getLocalStorage('relailerId');
// getLocalStorage 是我自己写的去本地缓存的

初始化state里的值时从本地缓存中取，

操作state里值的时候再存进缓存。这样子就形成了个闭环。

如果不用vuex 而只用本地缓存也是可以的，但是非常麻烦，你要考虑什么填什么时候取，什么时候调用，更新视图你得自己写。

 

完结。