Vuex 刷新页面，内容丢失问题

今天咱们来记录一下Vuex 刷新页面数据丢失的问题，用登录页面来说一下这个问题吧

用户登录之后数据会存储到Vuex中，座位全局数据在哪里都可以用。
首先Vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。
-- 解决方法：我是用本地存储的方式去解决的（此项目不涉及到外网，所以存储token之类的信息就在本地存储了）

第一步

   先创建一个仓库

import api from '../api/login' // 接口文件
import Vue from 'vue'
import { ACCESS_TOKEN } from './commit-options-list' // 映射的存储名称
// 创建user 仓库对象
const user = {
  // 数据存储
  state: {
    token: ''
  },
  // 修改state数据， state数据 只可以通过mutations去修改
  mutations: {
    SET_TOKEN : ( state, val) => {
      state.token = val
    }
  },
// 通过mutations 去修改state的数据， actions去执行异步操作
  actions: {
    Login ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        api.login(userInfo).then(res => {
          if (res.code === 0) {
            const data = res.data
            // 获取数据修改state里的token
            commit('SET_TOKEN', data.accessToken)
            // 这里用到了 vue-ls 插件：用大白话说就是重新封装了本地存储，会话存储功能
            // 设置本地存储并设置token失效时间
            Vue.ls.set(ACCESS_TOKEN, data.accessToken, 7 * 24 * 60 * 60 * 1000)
            resolve(res)
          } else {
            reject(res.message)
          }
        }).catch(error => {
          reject(error)
        })
      })
    },
    Logout({ commit }) {
      return new Promise((resolve) => {
        commit('SET_TOKEN', '')
        Vue.ls.remove()
        resolve()
      })
    }
  }
}
export default user

  store/index.js 我叫它统领文件，在这个里面可以有多个仓库

store/index.js 文件

第二步

创建一个同步到Vuex数据的js文件, cloneVuex.js

// 把仓库引入
import store from '../store'
// 映射对象引入
import { ACCESS_TOKEN } from '../store/commit-options-list'
// Vue 引入
import Vue from 'vue'
// 对外暴露一个函数，作用是修改state的数据为本地存储的数据
export default function setVuex () {
  store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
}

目前为止，只要是在页面中展示token，刷新就是空的，接下来最重要的一步，去执行这个函数

第三步

在main.js 文件，把我们写好的cloneVuex文件引入进来

import cloneVuex from './core/cloneVuex'

然后在new Vue的时候加上

new Vue({
  router,
  store,
  created: cloneVuex, // 页面每次刷新都会触发这个函数了， 就做到了数据持久化
  render: h => h(App)
}).$mount('#app')

这个时候就做到了数据持久化，刷新页面数据也会存在的
只要有时间就会在这里记录一下，本人也是前端届的小学生，共同学习吧!！后面附上映射本地存储名称的文件

export const ACCESS_TOKEN = 'Access-Token' // 目前就一条，哈哈， 但是可以有多条

本地存储的信息

最后编辑于：2020.08.10 14:32:35