『壹』 在Vue中,怎樣實現持久化存儲數據
在開發過程中,大家可能會有一個困惑,在使用vuex的時候,每當瀏覽器刷新頁面的時候,數據都會消失,還要重新去請求,那我們怎樣去持久化存儲我們所需要重復用到的數據呢?
舉個栗子,假設有這樣的情景,有一個登錄界面,我們需要點擊登錄之後存儲用戶名和密碼,該用戶的用戶名和密碼在以後的操作中都需要用到,
比如:
1、在顯示用戶信息的時候需要用到用戶名
2、在修改密碼的時候,我們需要比對密碼是否正確需要用到密碼
那下面就介紹一個使用的方法:
藉助於 vuex-persist 插件
使用 npm install vuex-persist -D 安裝依賴
我們可以通過 commit 提交並寫入我們需要持久化存儲數據
在 login.vue 中
這個是我的 vuex 存儲的目錄結構
在 index.js 中
在 user.js 中
『貳』 前端面試被問到,vue實現數據雙向綁定,原理是啥
其原理大致是這樣:
在數據渲染時使用prop渲染數據
將prop綁定到子組件自身的數據上,修改數據時修改自身數據來替代prop
watch子組件自身數據的改變,觸發事件通知父組件更改綁定到prop的數據
這樣做的好處是:父組件數據改變時,不會修改存儲prop的子組件數據,只是以子組件數據為媒介,完成對prop的雙向修改。