Vue用vuex永久儲(chǔ)存數(shù)據(jù)

首先需要在 vue項(xiàng)目上  安裝 vuex 與 vuex-persistedstate 

npm i vuex?
npm install --save vuex-persistedstate

1. 在 src 目錄下 創(chuàng)建 "store" 文件夾

2. 在store 文件夾下 創(chuàng)建 自定義 " index.js" 文件

3.在 index.js 中 import  引入 vue , vuex , persistedstate  并且使用use 方法是用 Vuex

4. 在store對(duì)象內(nèi)  plugins: [createPersistedState()],  使用 persistedstate 組件

5.把store文件夾 引入  main.js 中

最后  可以用 以下方法 訪問(wèn)到數(shù)據(jù) ， console.log(this.$store)  看下就明白了

this.$store.state

this.$store.commit('函數(shù)名','需要傳的參數(shù)')

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
 
const store = new Vuex.Store({
  plugins: [createPersistedState()],
  state: {
    isLoading: false,
    num: ['1']
  },
  mutations: {
    loading (state, str) {
      let list = []
      list.push(str)
      state.num = [...state.num, ...list]
      console.log('ok')
    }
  }
})
export default store

基于vuex的數(shù)據(jù)持久化問(wèn)題

存在問(wèn)題

前端在使用vuex存儲(chǔ)數(shù)據(jù)的時(shí)候，一旦頁(yè)面刷新，所有之前存儲(chǔ)的數(shù)據(jù)就會(huì)丟失。這是因?yàn)閖s代碼運(yùn)行在內(nèi)存中，代碼在運(yùn)行時(shí)，所有的變量和函數(shù)都是保存在內(nèi)存中的，因此在刷新時(shí)，之前申請(qǐng)的內(nèi)存會(huì)被釋放，js腳本會(huì)被重新加載，變量重新賦值。

此問(wèn)題映射在本項(xiàng)目上的體現(xiàn)

為了更直觀方便的處理數(shù)據(jù)，一方面在數(shù)據(jù)庫(kù)中設(shè)置了服務(wù)類(lèi)型表，另一方面在前端視圖層處理時(shí)，將服務(wù)列表里的類(lèi)型數(shù)據(jù)都統(tǒng)計(jì)一遍，存放在vuex的state中。

為了提高本項(xiàng)目的執(zhí)行效率，我在vuex中設(shè)置了一個(gè)flag布爾變量，初值為true，保證只有在第一次掛載組件時(shí)才向后臺(tái)發(fā)出請(qǐng)求，獲取所有服務(wù)信息，并且修改flag值為false。

但是這樣就會(huì)導(dǎo)致一個(gè)問(wèn)題：下一次再重新登陸的時(shí)候，vuex數(shù)據(jù)刷新，但是不會(huì)再請(qǐng)求后臺(tái)數(shù)據(jù)了，因此得不到后臺(tái)的數(shù)據(jù)。

然后我又找了一個(gè)辦法，當(dāng)每次登陸的時(shí)候，把vuex中的flag值重新設(shè)置為true，這樣雖然解決了之前登陸之后沒(méi)有數(shù)據(jù)顯示的問(wèn)題，但是同時(shí)也造成了另一個(gè)問(wèn)題：數(shù)據(jù)累加，登陸一次所有之前的服務(wù)類(lèi)型數(shù)據(jù)就會(huì)累加一次

解決方法：使用vuex的數(shù)據(jù)持久化

實(shí)現(xiàn)方式：

1.利用瀏覽器的本地存儲(chǔ)localStorage和sessionStorage

• vuex的state在localStorage或sessionStorage取值
• 在mutations里面，定義的方法對(duì)vuex的狀態(tài)操作的同時(shí)，對(duì)存儲(chǔ)也做對(duì)應(yīng)的操作

2.利用vue-presistedstate插件

• 原理和方法1一樣，也是結(jié)合了瀏覽器的本地存儲(chǔ)localStorage和sessionStorage，只不過(guò)是統(tǒng)一的配置，不需要每次都手寫(xiě)存儲(chǔ)方法。
• 安裝方式；npm install vuex-persistedstate --save
• 引入：在store下的index.js中引入，然后使用插件plugins

本項(xiàng)目為了高效方便，采用了第二種下載插件的方式。

這樣就實(shí)現(xiàn)了vuex中數(shù)據(jù)持久化的效果，之前存儲(chǔ)的數(shù)據(jù)再刷新和退出之后就不會(huì)丟失了。

總結(jié)

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

最新評(píng)論