Vue刷新页面数据持久化

题记

  vue项目中，多个页面之间通过路由传递数据有params和query两种传参方式，但是这两种方式在刷新页面时数据会丢失，params是直接获取不到参数，query可以获取到URL里的参数，但是也有一些问题存在。而vuex刷新之后数据也会丢失。

方法一 params传参

  参数不会显示在路由中，所以刷新页面时，参数是从当前页面传给当前页面，然而当前页面并没有参数传递，所以参数会丢失。

方法二 query传参

  类似GET方式传参，参数会在路由中显示，取参数是从路由中取，因为当前路由中有参数，所以刷新页面，数据不会丢失。

  此外要注意传参为对象的情况，最好先用JSON.stringify()处理一下，接收时再用JSON.parse()转换成对象。

方法三 vuex + sessionstorage

  在页面跳转时，修改vuex中的state的值，同时sessionstorage.setItem()保存到sessionstorage中一份，下一页面需要用数据时，再用sessionstorage.getItem()获取。

  但是这种方法不好用，存数据、取数据很麻烦，需要写大量代码，而且很容易遗漏数据的状态等。

方法四  vuex-persistedstate（tuijian）

  vuex-persistedstate的原理是结合了vuex和存储方式，不需要手动每次都写存储方法

// 安装
npm install vuex-persistedstate --save

import Vue from 'vue'
import Vuex from 'vuex'
import modules from './module'
import persistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  modules,
  plugins: [
  //  vuex-persistedstate默认使用localStorage来固化数据，但是有的情况需要在浏览器窗口关闭时清除数据，所以需要设为sessionStorage保存
    persistedState({
      storage: window.sessionStorage
    })
  ]
})

  插件默认把所有state保存，取数据需要做一下转化，state1是state中的一个数据。

JSON.parse(sessionStorage.getItem('vuex')).state1