解决刷新页面vuex数据获取不到的问题

最新推荐文章于 2025-02-04 21:09:32 发布

原创最新推荐文章于 2025-02-04 21:09:32 发布 · 7.5k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

在Vue应用中，使用Vuex存储的数据在页面刷新后会丢失。这是因为Vuex的状态在刷新时会被重置。为了解决这个问题，可以在用户登录并获取用户信息后，将数据同时存储在Vuex和localStorage中。当Vuex状态改变时，通过监听localStorage的变化来同步Vuex状态，确保刷新后数据依然可用。示例代码展示了如何在store中设置和更新用户信息，并在组件中使用Vuex的mapState辅助函数来绑定用户数据。

现象：

一进入页面可以在mounted中获取到vuex中的数据，

mounted() {
	console.log('🚀 ~ this.$store.state.user.companyId', this.$store.state.user.companyId);
}

在这里插入图片描述
但是刷新页面后就获取不到了。
刷新页面后就获取不到vuex中的数据

解释：

刷新页面vue实例重新加载，store被重新赋值，要想存储数据就必须存储在外部。

解决思路：

在用户登录之后，获取到用户信息，在存储store数据的同时，再存储到localStorage中。
vuex中的变量是响应式的，而localStorage中的变量不是，当vuex变量改变时，相应的组件也会得到更新，而localStorage不会，除非操作localStorage的数据，所以应该让vuex中的状态从localStorage中得到。

代码：

1）store -> index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        user: JSON.parse(localStorage.getItem('userData')) || {} // 用户信息
    },
    mutations: {
        // 设置用户 信息
        setUser(state, val) {
            localStorage.setItem('userData', JSON.stringify(val));
            state.user = val;
        }
    },
    actions: {
        // 更新 用户信息
        updateUser({ commit }, val) {
            commit('setUser', val);
        }
    }
});

2）vue组件中
可以使用mapState辅助函数来帮我们生成计算属性。

import { mapState } from 'vuex';
export default {
	computed: {
        ...mapState({
            user: state => state.user
        })
    },
    mounted() {
		console.log('🚀 ~ this.$store.state.user.companyId', this.$store.state.user.companyId);
	}
}