利用Nuxt.js做Vuex数据持久化

Nuxt.js做Vuex数据持久化

数据丢失的原因

vuex存储的数据只是在页面中，相当于全局变量，页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。

因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。

解决方法 

这里将Vuex的数据存储到localStorage中，具体看下面代码

1. 在plugins.js文件中创建 store-cache.js

2. 在nuxt.config.js 中代码如下

  plugins: [
     { src: '~/plugins/store-cache', ssr: false },
  ],

store-cache.js 文件代码如下

export default function(ctx) {
  // 离开页面 刷新前 将store中的数据存到localStorage
  window.addEventListener('beforeunload', () => {
    localStorage.setItem("storeCache", JSON.stringify(ctx.store.state))
  });
  // 获取localStorage中的store数据
  let storeCache = localStorage.getItem("storeCache")
  if (storeCache) {
    // 将localStorage中的store数据替换到store中
    ctx.store.replaceState(Object.assign({},ctx.store.state,JSON.parse(storeCache))
      )
  }
}

这样就解决了Vuex刷新数据丢失的问题了，实现了数据持久化

VueX数据持久化和辅助函数的使用

1.数据持久化

1.1本地缓存

在项目中使用vuex进行项目一些公共状态的共享，可以在任意页面中使用，避免了数据在组件中层层传递的繁琐。而且vuex中的数据是响应式的，很好的帮助我们解决了这个问题。但是vuex中的数据是保存在内存中的，页面刷新会重新初始化导致数据丢失。

我们可以使用localStorage或者sessionStorage，在mutation更改数据的时候，同时往浏览器本地缓存也存一份，在state取的时候也从本地缓存取一份或者用原来的。

1.2 使用第三方库 vuex-persistedstate

npm install --save?vuex-persistedstate

使用vuex-persistedstate默认存储到localStorage

 引入之后，配置plugins和存储持久化的键名即可，就会自动在localStorage配置的键名下存储state全局数据和模块化之后的数据

2.Vuex辅助函数的使用 

vuex可以使用$store.state或者getters，$store.dispatch和commit触发actions和mutations更新。也可以使用辅助函数。

$store的写法最简单且通俗易懂，但辅助函数的写法也建议大家掌握，免得遇到有些项目中遇到了看不懂。

首先需要从vuex中引入辅助函数

2.1 mapState和getters

mapState可以使用数组语法也可以使用，对象语法。

当vuex没有模块化的时候，可以直接使用数组语法，简单便捷，...mapState['state中键名']；也可以使用对象语法，如下。模块化之后也有两是写法，数组：...mapState['模块名'，'键名']；对象：如下。getters也是两种写法，和state一样，都是写在计算属性中。

computed: {
			...mapState({
				sellInfoCp: "sellerInfo"
			}),
			...mapState({
				billCp: state => state.bill.billInfo
			}),
			// ...mapGetters('bill',['bigSum'])
			// sellInfoCp() {
			// 	return this.$store.state.sellerInfo
			// }
		},

2.2 mapActions和mapMutations

mapActions和mapMutations都是写在methods方法中。

也都是有两种写法，数组和对象写法。

以mapMutations为例，数组：...mapMutations('模块名',['键名'])

对象：...mapMutations({自定义键名:"模块名/键名"})

methods: {
			// ...mapMutations('bill',['SET_AMOUNT']),
			...mapMutations({
				SET_AMOUNT: "bill/SET_AMOUNT"
			}),
			...mapActions('bill', ['FETCH_AMOUNT']),
		},

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论