2024年Web前端最新Vuex - 持久化_vuex数据持久化(1)，2024最新Web前端面试真题解析

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…

算法

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    …
    

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

原因：因为Vuex是基于内存，存在内存里面的，刷新网页之后就没有了，不会持久化储存

**解决方案：**以token举例(存储登录信息)

**实现思路：**只要Vuex中的数据发生变化，就自动往本地同步一份

二、vuex持久化实现步骤

1. 安装

1）安装一个vuex的插件 vuex-persistedstate 来支持vuex的状态持久化

// npm安装命令:

npm i vuex-persistedstate --save

// yarn安装

yarn add vuex-persistedstate

注意: 该插件应是生产依赖包, 所以要 -S
在package.json中

2. 配置仓库store

**2）**在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 cart.js

import Vue from 'vue'
import Vuex from 'vuex'
import loginModule from './modules/loginModule'
import createPersistedstate  from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    loginModule
  },
  plugins:[
    createPersistedstate({
      key:'user',// 存数据的key名   自定义的  要有语义化
      // paths: ['loginModule'] // 要把那些模块加入缓存
    }) 
  ]
})

三、存储不同模块数据

1. 获取指定模块state数据

2. 获取全局state和模块数据

3. 只存储state全局数据

四、API方法

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

面试题宝典**

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。