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

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

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

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

解決方法 

這里將Vuex的數(shù)據(jù)存儲到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) {
  // 離開頁面 刷新前 將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ù)丟失的問題了，實(shí)現(xiàn)了數(shù)據(jù)持久化

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

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

1.1本地緩存

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

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

1.2 使用第三方庫 vuex-persistedstate

npm install --save?vuex-persistedstate

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

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

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

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

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

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

2.1 mapState和getters

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

當(dāng)vuex沒有模塊化的時候，可以直接使用數(shù)組語法，簡單便捷，...mapState['state中鍵名']；也可以使用對象語法，如下。模塊化之后也有兩是寫法，數(shù)組：...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方法中。

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

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

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

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

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論