vue中使用vuex让vuex中的数据持久化？

目录

一、为什么要使用数据持久化(使用场景)？

二、如何使用？

        1、首先第一步，安装vuex-persistedstate插件

        2、在store/index.js文件中配置以下代码：

---

一、为什么要使用数据持久化(使用场景)？

        在日常项目开发中，我们经常会遇到一些需要永久保留数据状态的的模块；例如：收藏某位博主的作品，关注某一作者，这些需要永久保存的用户信息状态 我们就需要用到数据持久化这一理念

二、如何使用？

        在vue开发中，我们可以使用插件vuex-persistedstate 来让我们实现数据持久化，本质上还是利用我们的localStorage和sessionStorage来编写：

        1、首先第一步，安装vuex-persistedstate插件

                使用 npm i vuex-persistedstate --save 安装插件

        2、在store/index.js文件中配置以下代码：

     

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  },
  //配置代码如下：
  plugins:[createPersistedstate({
		// 存储方式 ：localStorage \ sessionStorage
		storage:localStorage,
		key:'Data'
	})],
})

里面的key属性代表存储时的"键"，等同于本地存储中setItem的第一个属性

以上配置完毕就可以实现vuex中的数据持久化了，言简意赅，如果帮到你请点赞支持一下~~