当前位置:首页 » 服务存储 » vue存储数据原理
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

vue存储数据原理

发布时间: 2023-07-16 21:19:54

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