JavaScript 开发者必看：用 localStorage 解决 Vuex 页面刷新数据丢失难题

Vuex 的数据在页面刷新后会丢失，这是因为在浏览器的本地存储中，只有当页面关闭时才会清除存储的数据。如果你需要在页面刷新后保留 Vuex 的数据，你可以考虑使用浏览器的 localStorage 或 sessionStorage。 localStorage 会在浏览器关闭时保留数据，而 sessionStorage 则会在窗口关闭时删除数据。你可以根据你的需求选择合适的存储方式。 以下是一个使用 localStorage 的例子： ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { data: JSON.parse(localStorage.getItem('data')) || {} }, mutations: { setData(state, data) { state.data = data localStorage.setItem('data', JSON.stringify(data)) } }, actions: { setData({ commit }, data) { commit('setData', data) } } }) ``` 在这个例子中，我们在 Vuex 的 state 中设置了 data，并在 mutations 中添加了一个 setData 方法来更新数据并将其存储到 localStorage 中。在 actions 中，我们定义了一个 setData 方法来调用 mutations 中的 setData 方法。 当你需要在页面刷新后保留数据时，你可以调用 setData 方法并将数据传递给它。例如： ```javascript this.$store.dispatch('setData', { key: 'value' }) ``` 这将在页面刷新后保留 data，并在localStorage中存储。 ######[AI写代码神器 | 290点数解答 | 2023-11-09 01:32:37]