‘壹’ 在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的双向修改。