Vue 之 Vux数据保存

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/smalCat/article/details/85766280

在日常Vuex项目开发中，我们经常需要这样一个需求：页面是不关闭，那么数据永久存在，但是Vue的插件Vux的特性决定了，一旦页面刷新，即使不关闭，Vux内的状态，依然会丢失，除非重新赋值

解决

在和朋友交流的时候，朋友推荐了一个插件，具体作者，我不知道，别笑，但好用就行

插件名字为

// 数据持久化插件，页面刷新后存在 Vux的数据不会丢失，不用再去手动存取数据到storage
// 我这里是在store引入的
import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist' 

// 配置数据存储到哪里
const vuexLocal = new VuexPersistence({
  storage: window.localStorage
})

// 然后在输入对象中使用插件
const store = new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
}) 

整体就完成了 Vux的数据本地持久化的操作，这个插件只是帮我们完了存取的操作，根本操作依然是在本地存取数据。

数据问题得到解决