vuex的本地持久化存储

Vuex的本地持久化实现

最新推荐文章于 2025-09-29 10:17:23 发布

原创最新推荐文章于 2025-09-29 10:17:23 发布 · 481 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

本文介绍了在页面刷新后，如何使用vuex-persistedstate插件将vuex状态存储到localStorage，以实现数据的持久化。通过安装并引入插件，将其配置到vuex的plugins数组中，确保vuex的状态在刷新后依然保留。

使用原因

每次刷新页面后vuex中保存的token都会被刷新，为了将vuex中的数据保存到本地存储localStorage中

使用方法

安装插件

yarn add vuex-persistedstate@3.2.1

引入插件

import createPersistedState from ‘vuex-persistedstate’

使用插件
在vuex中有一个属性plugins，这是一个数组，里面就是存放的各种方法，在这里使用上面安装的插件对应的方法

export default new Vuex.Store({
  state: {
    token: '' // 保存token字符串
  },
  getters: {
  },
  mutations: {
    updateToken (state, value) {
      state.token = value
    }
  },
  actions: {
  },
  modules: {
  },
  plugins: [
    createPersistedState() // 注入持久化的插件，将vuex中的数据存储到localStorerage中
  ]
})