🎈Vuex缓存数据持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情在

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情

🎈大家好，我是橙橙子，新人初来乍到，请多多关照~

📝小小的前端一枚，分享一些日常的学习和项目实战总结~

😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

在vue项目中我们常常用vuex来做全局的状态管理，缺点是当刷新网页后，保存在vuex实例store里的数据会丢失。

这因为 store 里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值初始化。

解决方法：

使用 localStorage 或者 sessionStroage
使用 vuex-along

优点：

能够在vuex中,集中管理共享的数据,易于开发和后期维护；
Vuex 的状态存储是响应式的，当 Vue 组件从 store中读取状态的时候，若 store 中的状态发生变化，能够触发响应式的渲染页面更新 (localStorage就不会)，那么相应的组件也会相应地得到高效更新。
js 原生的数据对象写法, 比起 localStorage 不需要做转换, 使用方便
限定了一种可预测的方式改变数据, 避免大项目中, 数据不小心的污染

使用 `localStorage` 或者 `sessionStroage`

我们常常用session搭配vuex一起使用。将数据存入到session中，使用时从session中拿。

created() {
    // 在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }
    // 在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
},

举个栗子：

export default {
    namespaced: true,
    state: {
        userToken: localStorage.getItem('sport_authToken') || '',   // 获取用户token
        userInfo: localStorage.getItem('sport_userInfo') || '', // 获取用户信息
    },

    mutations: {
        // 提交用户token
        setUserToken(state, token) {
            state.userToken = token;
            localStorage.setItem('sport_authToken', token);  // 设置用户token
        },

        // 提交用户信息
        setUserInfo(state, userInfo) {
            state.userInfo = userInfo;
            localStorage.setItem('sport_userInfo', userInfo);  // 设置用户信息
        },
    },

    actions: {
        // 用户登录
        login({ commit }, postData) {
            return new Promise((resolve, reject) => {
                postParam(login, postData).then((res) => {
                    if (res.status === 200) {
                        commit('setUserToken', res.result.token);
                        commit('setUserInfo', res.result.userAccount);
                        resolve(res);
                    } else {
                        commit('setUserToken', '');
                        commit('setUserInfo', '');
                        reject(res);
                    }
                })
            })
        },
    }
}

使用vuex-along

vuex-along 的实质也是将 vuex 中的数据存放到 localStorage 或者 sessionStroage 中，只不过这个存取过程组件会帮我们完成，只需要用vuex的读取数据方式操作就可以了

安装 vuex-along:

npm install vuex-along --save

配置 vuex-along: 在 store/index.js 中添加以下代码:

import VueXAlong from 'vuex-along' //导入插件
export default new Vuex.Store({
    // modules: {
        // controler  //模块化vuex
    // },
    plugins: [VueXAlong({
        name: 'store',     // 存放在localStroage或者sessionStroage 中的名字
        local: false,      // 是否存放在local中  false 不存放 如果存放按照下面session的配置
        session: { list: [], isFilter: true } // 如果值不为false 那么可以传递对象 其中 当isFilter设置为true时， list 数组中的值就会被过滤调,这些值不会存放在seesion或者local中
    })]
});

🎈Vuex缓存数据

使用 localStorage 或者 sessionStroage

使用vuex-along

使用 `localStorage` 或者 `sessionStroage`