vuex刷新页面数据丢失怎么解决_vuex状态机浅谈-CSDN博客

本文介绍了解决F5刷新后Vuex状态丢失的问题，通过将状态同步保存至localStorage，并展示了如何结合v-model使用Vuex，确保组件状态的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我最近项目上在使用vuex的过程中，遇到下面两个问题

F5刷新后，vuex中状态丢失
v-model需要与vuex结合

针对这两个问题，我的解决办法是

问题1：F5刷新后，vuex中状态丢失

解决办法：将状态同步保存到localStorage中，下面的例子列出了两种格式的数据保存，分别是字符串格式和对象格式

state中存储数据：

state: {    tabActiveName: localStorage.getItem('tabActiveName') || '',    user: JSON.parse(localStorage.getItem('user')) || {}  }

mutation中保存提交的数据

setTabActiveName (state, payload) {    localStorage.setItem('tabActiveName', payload)    state.tabActiveName = payload  },  login (state, payload) {    localStorage.setItem('user', JSON.stringify({...payload}))    state.user = {...payload}  }

这样当每次程序commit mutation更新状态时，同步到localStorage中，当F5刷新后，state中的状态会从localStorage中读取

问题2：v-model需要与vuex结合

以问题1中的tabActiveName为例子

组件中使用v-model

v-model="activeName"

将model使用computed计算属性声明

computed: {    activeName: {      get () {        return this.$store.state.tabActiveName      },      set (newVal) {        this.$store.commit('setTabActiveName', newVal)      }    }}