why？

在vuex的时候 刷新以后里面存储的state就会被浏览器释放掉，因为我们的state都是存储在内存中的，所以一刷新页面就会把state中的数据重置，这就涉及到vue数据持久化的问题。

使用vuex的插件 来解决

使用vuex-persistedstate
首先我们先安装这个插件

  1. npm i -S vuex-persistedstate

配置使用

在vuex初始化的时候作为组件去引入

  1. import { createStore, createLogger } from 'vuex'
  2. import home from './modules/home'
  3. import dome2 from './modules/dome2'
  4. import persistedState from 'vuex-persistedstate'
  6. const debug = process.env.NODE_ENV !== 'production'
  8. export default createStore({
  9.   modules: {
  10.     home,
  11.     dome2
  12.   },
  13.   strict: debug,
  14.   plugins: debug ? [createLogger(),persistedState()] : []
  15. });

特殊情况

vuex-persistedstate默认使用localStorage来固化数据，一些特殊情况要如何应对呢？（如：Mac中的safari的无痕浏览模式）
这时候就需要使用sessionStorage

  1. plugins: [
  2.     persistedState({ storage: window.sessionStorage })
  3. ]

还有一种就是使用cookie的时候

  1. import persistedState from 'vuex-persistedstate'
  2. import * as Cookies from 'js-cookie'
  4. export default new Vuex.Store({
  5.   // ...
  6.   plugins: [
  7.     persistedState({
  8.       storage: {
  9.         getItem: key => Cookies.get(key),
  10.         setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
  11.         removeItem: key => Cookies.remove(key)
  12.       }
  13.     })
  14.   ]
  15. })

使用vuex-persistedstate指定需要持久化的state

  1. import persistedState from "vuex-persistedstate"
  3. plugins: [
  4.    persistedState({
  5.              storage:window.sessionStorage,
  6.          reducer(val)  {
  7.          return {
  8.              // 只储存state中的token
  9.              assessmentData: val.token
  10.          }
  11.          }
  12.       }
  13. )]

最后我们在页面里需要使用辅助函数以及dispatch来触发就可以实现数据持久化
这样我们就可以使用vuex来进行储存数据了