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源码分析的文章写出来。