我正在嘗試制作一個沒有后臺的應用程式，我正在使用Vue和Vuex在我的應用程式的一個商店中設定一些狀態。 有什么方法可以在設定后堅持這個狀態，并在不呼叫服務器的情況下進行瀏覽器重繪 ......或者在頁面重繪 后，它總是默認回到默認的初始狀態值？
uj5u.com熱心網友回復：
正如其他答案中所說，有幾種方法可以持久化狀態。
在探索本地存盤和Vuex時，有一些方法可以實作這一目標。
存盤在本地存盤中的所有內容都是以鍵值對形式存盤的字串。要將其存盤在本地存盤中，你要寫
//將值 "value "與鍵 "key "存盤在一起
localStorage.setItem('key', 'value')。
// 從本地存盤空間加載資料作為一個變數
let val = localStorage.getItem('key');
如果你想存盤一個物件，你要把它轉換為JSON字串
//將物件轉換為JSON字串并以 "key "來存盤 localStorage.setItem('key', JSON.stringify(object))。 // 檢索資料并將JSON字串轉換為物件 let obj = JSON.parse(localStorage.getItem('key'))。你可以從Vuex中使用這個，存盤某些值或整個商店。
例如，在一個vuex函式中，你可以檢查本地存盤是否有一個值，如果沒有，就從一個api中獲取它：
...
if (localStorage.getItem('key')) {
// 使用本地存盤的資料
} else {
// 從一個api/其他來源獲取它
}
...
如果你想將整個商店存盤在本地存盤中（不是說你應該這樣做），并且你想確保總是有最新的保存，你可以在Vuex中創建一個訂閱，在每次商店更新時被觸發。
//創建一個訂閱，在每次突變時存盤更新資訊
store.subscribe((mutation, state) => {
//將存盤物件存盤為一個JSON字串
localStorage.setItem('store', JSON.stringify(state))。
});
當你的Vue應用程式被創建時，你可以呼叫一個動作來檢查本地存盤，如果存在一個存盤，就加載它
if (localStorage.getItem('store')) {
// 用存盤的物件替換存盤的狀態物件
this.replaceState(
Object.assign(state, JSON.parse(localStorage.getItem('store')))
);
...
}
這是對如何在本地存盤中進行存盤的一個快速瀏覽。你必須考慮到如何重置/驗證本地存盤的資料。你還必須決定要存盤什么。如果你應該在上面設定某種時間戳，等等。
有一些 vuex 的插件可以為你做一些這樣的事情。請看一下https://github.com/vuejs/awesome-vue，看看你是否能找到什么。
uj5u.com熱心網友回復：
你可以使用許多網路API來在用戶的瀏覽器中持久化一些狀態：
uj5u.com熱心網友回復：
正如Nino所建議的，vuex-persist將為你完美地完成這項作業。它允許選擇你想持久化的vuex模塊，所以你可以跳過你不想持久化的模塊，比如一些與狀態系結的輸入值。
使用 vuex-persist，你不必記住鍵，也不必從 localStorage 獲取/設定值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/327381.html
標籤：
上一篇：如何結合每個選擇標簽的資料