本文已参与[新人创作礼]活动，一起开启掘金创作之路

keep-alive（缓存）与vue-page-stack（单页应用导航管理器）

juejin.cn/post/709349…

一.Vuex

Vue.js的一个用于存储数据的仓库，就是把各个组件公用的数据放到一个仓库里面进行统一的管理，这样既使得非父子组件间的数据共享变得简单明了，也让程序变得更加可维护（将数据抽离了出来）,而且只要仓库里面的数据发生了变化，在其他组件里面数据被引用的地方也会自动更新。

二.应用场景

Vuex相当于一个内存中的对象，其中数据可以理解为是保存在内存中的全局变量，当页面刷新后该对象会被初始化，之前存放的数据也会被初始化掉。

三.解决方案

1.将数据存储到存localStorage中

将数据存储到存localStorage中，数据不会因为页面或浏览器的关闭而丢失，清除的话可以手动清除

在Vuex初始化的时候就尝试去localStorage里面读取之前的数据，再存回state中，这样当页面刷新或关闭后再打开时，state中还是会有之前的数据;

2.将数据存储到存sessionStorage中

将数据存储到存sessionStorage中，页面刷新数据保存，页面关闭数据被清除

3.将数据存储到存cookie中

cookie

前端存储的一种，一般由服务器生成，可以设置过期时间，容量有限，一个浏览器最多可以创建大约300个cookie,并且每个cookie不超过4KB，每个 Web 站点能设置的 Cookie 总数不能超过 20 个。

应用

默认的token是放在cookie里的，当你授权（登录）一个程序时，他就是个依据，判断你是否已经授权该软件；cookie就是写在客户端的一个txt文件，里面包括你登录信息之类的，这样你下次在登录时就会自动调用cookie登录

4.借助第三方插件工具来实现vuex数据的持久化存储

(1)下包

yarn add vuex-persistedstate

(2)使用localStorage及sessionStorage存储

store文件中只有一个index.js

import Vuex from "vuex"
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)

const store = new Vuex.Store({
  modules,
  getters,
  plugins: [
    // 持久化插件配置
    createPersistedState({
      // storage:存储位置，localStorage或sessionStorage或cookie
      // cookie 存储方式有区别，下面单独讲
      // 默认存储在localStorage中
      storage: window.sessionStorage,
      // 存储的 key 值，默认是vuex
      key: 'vueX',
      // 要存储的数据,render函数的参数是state对象
      render(state) {
        return { ...state }
        // 我这里直接把state中的全部数据解构存进去，
        // 也可以只存需要的数据，以key:value的形式
      }
    })
  ]
})

store文件中有多个js文件

将其他js文件放在store\module中

store\getters.js接收state

store\index.js接收module及getter中数据

/* module.js */
export const dataStore = {
  state: {
    data: []
  }
}
 
/* store.js */
import { dataStore } from './module'
 
const dataState = createPersistedState({
  paths: ['data']
})
 
export new Vuex.Store({
  modules: {
    dataStore
  },
  plugins: [dataState]
})

注意

数据不能超过5M字节,超过时可使用localStorage扩容

数据较少时可直接使用localStorage存储

(3)使用cookie存储

下包，方便对cookie进行操作

yarn add cookie js-cookie

import * as Cookies from 'js-cookie';
import cookie from 'cookie';

plugins: [
    persistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key//名称, value//值, { expires:7 //Cookie 的生存周期这里有效期7天 ，路径：''}),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]