vue和react的前端状态持久化存储
Mercer-Lee的空间 2019-08-11
JS
Vue
React
# vuex和redux
在日常的前端开发中,无论你是用React或者Vue,一般都会用到像vuex或者redux这样的状态管理解决方案。这两个包也是大家最常用和当下最流行的。
# 需求场景
无论是vuex还是redux,存储的值在页面刷新的时候都会重新赋值初始化,这是因为vue或者react的实例重新加载了,但是很多场景下是需要保存这些值的,比如用户的登录信息、购物车操作等等。
# vuex的解决方案
- vuex-persistedstate (opens new window) vuex的持久化存储解决方案我试过很多种,最后我还是选择了这个第三方包,不仅是这个好用,主要还是他的源码写的不错,用ts写的,有机会的话我会详细给大家解读他的源码,这里先埋个坑,后面来填。
# 使用
// app/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'
import createPersiste from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
user,
},
plugins: [createPersiste()]
});
# redux的解决方案
- redux-persist (opens new window) redux的解决方案比较统一,所以这里没有什么争议。
# 使用
// src/redux/modules/index.js
import { combineReducers } from "redux";
import user from './reducers/user'
//合并成根reducer
const rootReducer = combineReducers({
user
})
export default rootReducer
// src/redux/store.js
import { createStore, applyMiddleware } from "redux"
import thunk from "redux-thunk"
import { persistStore, persistReducer } from 'redux-persist'
import localStorage from 'redux-persist/lib/storage'
import rootReducer from "./modules"
let store;
const storageConfig = {
key: 'state',
storage: localStorage,
blacklist: ['register'] // 指定不存储的
}
const _persistReducer = persistReducer(storageConfig, rootReducer)
if (
process.env.NODE_ENV !== "production" &&
window.__REDUX_DEVTOOLS_EXTENSION__
) {
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
store = createStore(
_persistReducer,
composeEnhancers(applyMiddleware(thunk))
);
} else {
store = createStore(_persistReducer, applyMiddleware(thunk));
}
export default store;
export const persistor = persistStore(store)
# 结语
又水了一篇文章,这样的文章没有什么深度,算是一个前端的经验总结吧,有机会会把对vuex-persistedstate源码分析的文章写出来。