vuex可以進行全局的狀態(tài)管理，但刷新后刷新后數(shù)據(jù)會消失，這是我們不愿意看到的。怎么解決呢，我們可以結(jié)合本地存儲做到數(shù)據(jù)狀態(tài)持久化，也可以通過插件vuex-persistedstate。

1.手動利用HTML5的本地存儲

方法

1、vuex的state在localStorage或sessionStorage中取值；

2、在mutations中,定義的方法里對vuex的狀態(tài)操作的同時對存儲也做對應(yīng)的操作。

這樣state就會和存儲一起存在并且與vuex同步

2.利用vuex-persistedstate插件

插件的原理其實也是結(jié)合了存儲方式,只是統(tǒng)一的配置就不需要手動每次都寫存儲方法。

使用方法

安裝

npm install vuex-persistedstate --save

引入及配置：在store下的index.js中

import createPersistedState from "vuex-persistedstate"

conststore =newVuex.Store({

// ...

plugins: [createPersistedState()]

})

默認(rèn)存儲到localStorage

想要存儲到sessionStorage，配置如下

import createPersistedState from "vuex-persistedstate"

conststore = newVuex.Store({

// ...

plugins: [createPersistedState({

storage:window.sessionStorage

})]

})

默認(rèn)持久化所有state

指定需要持久化的state,配置如下

import createPersistedState from "vuex-persistedstate"

conststore = newVuex.Store({

// ...

plugins: [createPersistedState({

storage:window.sessionStorage,

reducer(val)? {

return {

// 只儲存state中的assessmentData

assessmentData: val.assessmentData

}

}

})]

})

vuex引用多個插件的寫法

譬如：vuex提示的插件和持久化的插件一起使用，配置如下

import createPersistedState from "vuex-persistedstate"

import createLogger from 'vuex/dist/logger'

// 判斷環(huán)境 vuex提示生產(chǎn)環(huán)境中不使用

constdebug = process.env.NODE_ENV !== 'production'

constcreatePersisted = createPersistedState({

storage:window.sessionStorage

})

exportdefaultnewVuex.Store({

// ...

plugins: debug ? [createLogger(), createPersisted] : [createPersisted]

})

plugins要是一個一維數(shù)組不然會解析錯誤

總結(jié)

以上是生活随笔為你收集整理的vuex状态持久化_Vuex数据状态持久化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。