快捷導(dǎo)航

利用Nuxt.js做Vuex數(shù)據(jù)持久化

更新時(shí)間：2023年10月11日 11:40:43 作者：Vue安夏

這篇文章主要介紹了利用Nuxt.js做Vuex數(shù)據(jù)持久化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Nuxt.js做Vuex數(shù)據(jù)持久化

數(shù)據(jù)丟失的原因

vuex存儲(chǔ)的數(shù)據(jù)只是在頁(yè)面中，相當(dāng)于全局變量，頁(yè)面刷新的時(shí)候vuex里的數(shù)據(jù)會(huì)重新初始化，導(dǎo)致數(shù)據(jù)丟失。

因?yàn)関uex里的數(shù)據(jù)是保存在運(yùn)行內(nèi)存中的，當(dāng)頁(yè)面刷新時(shí)，頁(yè)面會(huì)重新加載vue實(shí)例，vuex里面的數(shù)據(jù)就會(huì)被重新賦值。

解決方法

這里將Vuex的數(shù)據(jù)存儲(chǔ)到localStorage中，具體看下面代碼

1. 在plugins.js文件中創(chuàng)建 store-cache.js

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

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

store-cache.js 文件代碼如下

export default function(ctx) {
  // 離開頁(yè)面 刷新前 將store中的數(shù)據(jù)存到localStorage
  window.addEventListener('beforeunload', () => {
    localStorage.setItem("storeCache", JSON.stringify(ctx.store.state))
  });
  // 獲取localStorage中的store數(shù)據(jù)
  let storeCache = localStorage.getItem("storeCache")
  if (storeCache) {
    // 將localStorage中的store數(shù)據(jù)替換到store中
    ctx.store.replaceState(Object.assign({},ctx.store.state,JSON.parse(storeCache))
      )
  }
}

這樣就解決了Vuex刷新數(shù)據(jù)丟失的問(wèn)題了，實(shí)現(xiàn)了數(shù)據(jù)持久化

VueX數(shù)據(jù)持久化和輔助函數(shù)的使用

1.數(shù)據(jù)持久化

1.1本地緩存

在項(xiàng)目中使用vuex進(jìn)行項(xiàng)目一些公共狀態(tài)的共享，可以在任意頁(yè)面中使用，避免了數(shù)據(jù)在組件中層層傳遞的繁瑣。而且vuex中的數(shù)據(jù)是響應(yīng)式的，很好的幫助我們解決了這個(gè)問(wèn)題。但是vuex中的數(shù)據(jù)是保存在內(nèi)存中的，頁(yè)面刷新會(huì)重新初始化導(dǎo)致數(shù)據(jù)丟失。

我們可以使用localStorage或者sessionStorage，在mutation更改數(shù)據(jù)的時(shí)候，同時(shí)往瀏覽器本地緩存也存一份，在state取的時(shí)候也從本地緩存取一份或者用原來(lái)的。

1.2 使用第三方庫(kù) vuex-persistedstate

npm install --save?vuex-persistedstate

使用vuex-persistedstate默認(rèn)存儲(chǔ)到localStorage

引入之后，配置plugins和存儲(chǔ)持久化的鍵名即可，就會(huì)自動(dòng)在localStorage配置的鍵名下存儲(chǔ)state全局?jǐn)?shù)據(jù)和模塊化之后的數(shù)據(jù)

2.Vuex輔助函數(shù)的使用

vuex可以使用$store.state或者getters，$store.dispatch和commit觸發(fā)actions和mutations更新。也可以使用輔助函數(shù)。

$store的寫法最簡(jiǎn)單且通俗易懂，但輔助函數(shù)的寫法也建議大家掌握，免得遇到有些項(xiàng)目中遇到了看不懂。

首先需要從vuex中引入輔助函數(shù)

2.1 mapState和getters

mapState可以使用數(shù)組語(yǔ)法也可以使用，對(duì)象語(yǔ)法。

當(dāng)vuex沒(méi)有模塊化的時(shí)候，可以直接使用數(shù)組語(yǔ)法，簡(jiǎn)單便捷，...mapState['state中鍵名']；也可以使用對(duì)象語(yǔ)法，如下。模塊化之后也有兩是寫法，數(shù)組：...mapState['模塊名'，'鍵名']；對(duì)象：如下。getters也是兩種寫法，和state一樣，都是寫在計(jì)算屬性中。

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方法中。

也都是有兩種寫法，數(shù)組和對(duì)象寫法。

以mapMutations為例，數(shù)組：...mapMutations('模塊名',['鍵名'])

對(duì)象：...mapMutations({自定義鍵名:"模塊名/鍵名"})

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