数据丢失原因

使用vuex通常会遇到页面刷新后数据丢失的问题。原因是页面刷新后浏览器会重新加载页面相关的组件，vuex的存储的状态当然也会被初始化，所以就造成了数据丢失。也就是vuex并不能做数据的持久化存储，只是在内存中创建个临时仓库。

解决方式

使用其他存储方式

• Cookiess
  可以将数据存储在Cookies中，但是Cookies大小被限制（各浏览器限制大小可能不同），不适合存储大数据。
• LocalStorage
  本地存储，直接将数据存到硬盘。不手动删除不会被清理。
• SessionStorage
  会话存储，临时存储。浏览器关闭则清空数据

代码

注意：既然您开始关注这个标题了，那我默认您已经掌握的vuex的基础用法，html代码就不贴了。只放store与storage两部分

store代码

包含两个变量 token 与 user

import { createStore } from "vuex";
import storage from "/src/utils/storage";
export default createStore({
  state: {
	    token: storage.getToken(),
	    user: storage.get("user"),
	  },
  mutations: {
    // 保存token
    SET_TOKEN(state, token) {
      state.token = token;
      storage.setToken(token);
    },
    // 移除token
    REMOVE_TOKEN(state) {
      state.token = "";
      storage.rmToken();
    },
    // 获取用户
    SET_USER(state, user) {
      state.user = user;
      storage.set("user", user);
    },
  },
});

storage代码

在这里token的存储与获取是通过localStorage来处理，其他信息都用sessionStorage来处理。两方法大同小异，怎么用看需求吧。

const storage = {
  setToken(value) {
    localStorage.setItem("token", JSON.stringify(value));
  },
  getToken() {
    return JSON.parse(localStorage.getItem("token"));
  },
  rmToken() {
    localStorage.removeItem("token");
  },
  set(key, value) {
    sessionStorage.setItem(key, JSON.stringify(value));
  },
  get(key) {
    return JSON.parse(sessionStorage.getItem(key));
  },
  remove(key) {
    sessionStorage.removeItem(key);
  },
};

export default storage;

总结

看到这不知道您是不是会有疑问，数据都存储到本地了，我要vuex还有毛用？？？存储和读取直接都在localStorage或者sessionStorage操作那不香嘛？这个选择其实看具体情况，如果是静态数据，存在那里我就不改了。放本地存储，香！没必要用vuex。如果是多个页面都在用而且数据还是动态变化的，需要响应式的加载数据，这种情况就可以用vuex了，方便，香！