Vuex中数据的全局化管理可以使得我们数据更加便于管理，但存在一个缺点就是当页面刷新也就是实例重新创建时，数据就会丢失，而使用localStorage就可以使得数据持久化保存，本文就此提供一种解决思路。1. localStorage基础localStorage是一种缓存机制，即时浏览器关闭后依然可以获取到。这使得你可以在页面上保存一些数据，后续的操作也可以继续访问的到。MDN 网站上有详细介绍，在此不再赘述，下面介绍下它的基本用法，非常简单。下面中的key表示获取访问数据的标识符// 存储localStorage.setItem(‘key’,‘value’);// 获取let val = localStorage.getItem(‘key’);注意： localStorage只能是字符串，意味着你想要存储对象和数组的话，localStorage只能先转换成JSON格式的字符串，然后获取的时候，再转换回原理的格式。// 保存数据localStorage.setItem(‘key’, JSON.stringify(object));// 数据获取，需转换let obj = JSON.parse(localStorage.getItem(‘key’));2. VuexVuex是Vue的一个中央数据管理工具，提供了一种全局存储中心，可以保存组件的数据，并且能够获取，更新和响应式变化。除非你做一个很小的应用，还是强力建议你使用Vuex来管理你的数据和状态。最近在开发一个Vueapp应用，碰到个需求，就是，我想要一些数据能够存在localStorage中，无论什么时候更新的时候，这就意味着，当用户关闭它们的浏览器或者电脑的时候，然后重新打开页面，数据依然能够显示在页面上。例如电商应用中，当用户添加商品到购物车的时候，页面关闭再打开是，购物车的物品依然能够展示在页面上展示。2.1 初始化store一个store实例的典型配置// 初始化 storeconst store new Vuex.Store({ state: { count: 1 }, mutations: {}, getters: {}});2.2 存储数据我们希望无论state对象任何时候更新，数据都能够缓存下来，我们可以在actions提交mutation来改变state中的数据。// Subscribe store.subscribe((mutation, state) => { // 保存数据对象为JSON字符串 localStorage.setItem(‘store’, JSON.stringify(state));});2.3 获取数据创建一个方法来获取`localStorage保存的数据，首先需要检查数据是否已经存在const store new Vuex.Store({ state: { count: 1 }, mutations: { initialiseStore(state) { // 检查ID是否存在 if(localStorage.getItem(‘store’)) { } } }, getters: {}});如果数据存在的话我们需要使用replaceState来替换数据。const store new Vuex.Store({ state: { count: 1 }, mutations: { initialiseStore(state) { // 检查ID是否存在 if(localStorage.getItem(‘store’)) { // 用存储的数据替换掉state 对象 this.replaceState( Object.assign(state, JSON.parse(localStorage.getItem(‘store’))) ); } } }, getters: {}});最后一步就是当实例创建的时候提交相应的mutation，我们想要在实例创建的最开始就执行，所以，我们选择在beforeCreate的时候触发。new Vue({ el: ‘#app’, store, beforeCreate() { this.$store.commit(‘initialiseStore’); }});3. 缓存的有效性在最近的一个项目中使用它时，数据的变化并没有引起相应的变化。 这是因为在不清除localStorage的情况下改变了store的结构。 添加值的时候是正常的，但重命名，编辑或更改值时，对应值的类型没有改变。当使用semver进行版本控制的话，可以调用版本号来检查store是否是最新版本。如果在加载时，用户与我的应用版本号相同，则进行缓存处理，否则清除缓存并加载新版本。注意： 会清除整个缓存，因此如果您依赖它来获取用户首选项或类似内容，您可能偏向选择性删除。第一步是加载我们的版本号。 我们存储在package.json中，因此，使用ES6的话很简单：import {version} from ‘./package.json’;但是，如果从git标记缓存您的内容或将其作为变量放在某处，它需要与存储分开访问，以便缓存不会完全覆盖它。接下来，在store中创建一个空字符串，以便在验证后保存该版本号。state: { // Cache version version: ‘’, count: 1},我们现在可以更新initialiseStore，以使用缓存中的版本号检查版本，并根据返回结果执行不同操作initialiseStore(state) { // 检查 store 是否存在 if(localStorage.getItem(‘store’)) { let store = JSON.parse(localStorage.getItem(‘store’)); // 检查存储的版本号是否与当前相同，不同的话加载缓存中的版本 if(store.version == version) { this.replaceState( Object.assign(state, store) ); } else { state.version = version; } }}4. 选择性缓存当只从store中缓存一些元素，可以通过在订阅功能中创建一个新对象并存储它来实现。我们已经在store加载时将缓存与当前存储状态合并，因此不需要更改。store.subscribe((mutation, state) => { let store = { version: state.version, count: 1 }; localStorage.setItem(‘store’, JSON.stringify(store));});参考Vue: Using localStorage with Vuex storeawesome-vue