Vuex代码文件规划
https://blog.csdn.net/weixin_41229588/article/details/105991201上一篇文章续直接上图部分文件有省略。只需要看关键代码即可。index.js文件结构import Vue from 'vue';import Vuex from 'vuex';import message from './modules/mes...
·
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 而只用本地缓存也是可以的,但是非常麻烦,你要考虑什么填什么时候取,什么时候调用,更新视图你得自己写。
完结。
更多推荐
已为社区贡献25条内容
所有评论(0)