瀏覽器重新整理後vuex中的狀態消失如何解決？
阿新 • • 發佈：2022-03-16
瀏覽器重新整理之後儲存在vuex中的狀態消失怎麼回事？
這是因為js是執行在瀏覽器記憶體中的，當瀏覽器重新整理時，瀏覽器記憶體被釋放，因此儲存在vuex中的資料會丟失。
解決思路
既然js是在記憶體中執行的，那麼考慮將不想丟失的資料放在一個不會因記憶體釋放而丟失的地方--本地儲存。
常用本地儲存有localStorage和sessionStorage，這裡順便區分一下二者的區別。
1.sessionStorage是會話級的儲存，其存在週期僅在統一瀏覽器視窗，並且在瀏覽器保持開啟的時候才存在，當關閉瀏覽器時sessionStorage將消失，因此sessionStorage不是永久型本地儲存。
2.localStorgae是永久型本地儲存，一旦將資料存到localStorage中，除非手動刪除，否則其將一直存在。
瞭解了以上兩種本地儲存的區別之後，我想大家應該猜到需要如何處理來永續性儲存資料了--vuex + localStorage。
舉個栗子：
// <html> <div @click="update">點選更新<div> // script export default { data() { status: '' }, mounted() { this.$store.dispatch('updateStatus'); }, methods: { update() { this.$store.commit('setStatus',this.status); } } } // vuex中 state: { status: '' }, mutations: { setStatus(state,status) { state.status = status; window.localStorage.activeStatus = JSON.stringify(status); }, selectStatus(state, status) { state.status = status; } }, actions: { updateStatus({ commit, state }) { let status= JSON.parse(window.localStorage.activeStatus); commit('selectStatus', status); } }
此例在觸發點選事件時，進行提交mutations中的setStatus操作，將狀態儲存到state中，並存儲狀態至本地儲存。每當頁面掛載的時候觸發actions的updateStatus操作，獲取本地儲存localStorage中的狀態，並提交mutations中的selectStatus操作更新狀態至state中，以達到狀態持久化的處理。