Vuex 面试题总结 的历史汇总!

news/2024/4/26 15:50:48/文章来源:https://blog.csdn.net/weixin_68903201/article/details/129236350

一.vuex是什么?怎么使用?哪种功能场景使用它?


        Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是:应用遇到多个组件共享状态时,使用vuex。

场景:多个组件共享数据或者是跨组件传递数据时,

比如:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车

怎么使用?

vue框架中状态管理。在main.js引入store,注入。
新建了一个目录store.js,…… export 。

vuex的流程

        页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation,mutation会修改state中对应的值。最后通过getter把对应值跑出去,在页面的计算属性中,通过,mapGetter来动态获取state中的值

二.vuex有哪几种属性?vuex的store有几个属性值?分别讲讲它们的作用是什么?
有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)

state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex

1. state:vuex的基本数据,用来存储变量

2. geeter:从基本数据(state)派生的数据,相当于state的计算属性

3. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。

4. action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。

5. modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。

三、vuex的state、getter、mutation、action、module特性分别是什么?


        state:存放公共数据的地方
  getter:获取根据业务场景处理返回的数据
  mutations:唯一修改state的方法,修改过程是同步的
  action:异步处理,通过分发操作触发mutation
  module:将store模块分割,减少代码臃肿

四、页面刷新后vuex的state数据丢失怎么解决?


放在localStorage 或者sessionStorage中 ,或者借用辅助插vuex-persistedstate。

vuex-persistedstate的createPersistedState()方法

五、使用vuex的优势是什么?


        作为全局变量来用;vue是单向数据流,有一个vuex来建一个”全局仓库“,可以减少很多开发时候的”传参地狱“。其实vuex中的所有功能都能够通过其他的方式进行实现,只不过vuex对这些方法进行了整合处理,使用起来更加便捷,同时也便于维护。

 六、vuex五种状态的特性是什么


1、vuex 的 store 特性是什么
vuex 就是一个仓库,仓库里放了很多对象。其中 state 就是数据源存放地,对应于一般 vue 对象里面的 data,state 里面存放的数据是响应式的,vue 组件从 store 读取数据,若是 store 中的数据发生改变,依赖这相数据的组件也会发生更新
它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性
2、vuex 的 getter 特性是什么
getter 可以对 state 进行计算操作,它就是 store 的计算属性
虽然在组件内也可以做计算属性,但是 getters 可以在多给件之间复用
如果一个状态只在一个组件内使用,是可以不用 getters
3、vuex 的 mutation 特性是什么
action 类似于 muation, 不同在于:action 提交的是 mutation,而不是直接变更状态
action 可以包含任意异步操作

七、vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中?请求数据是写在组件的methods中还是在vuex的action中?


        如果请求的数据是多个组件共享的,为了方便只写一份,就写vuex里面,如果是组件独用的就写在当前组件里面。

如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入 vuex 的 state 里

如果被其他地方复用,请将请求放入 action 里,方便复用,并包装成 promise 返回

八、怎么监听vuex数据的变化?


        先用计算属性、然后再监听

九、vuex使用actions时不支持多参数传递怎么办?


答:放在对象里面

十、你觉得vuex有什么缺点?


答:页面刷新时会使state的数据初始化

十一、你觉得要是不用vuex的话会带来哪些问题?

答:组件之间传值麻烦复杂

可维护性会下降,你要修改数据,你得维护 3 个地方
可读性下降,因为一个组件里的数据,你根本就看不出来是从哪里来的
增加耦合,大量的上传派发,会让耦合性大大的增加,本来 Vue 用 Component 就是为了减少耦合,现在这么用,和组件化的初衷相背
 

十二、vuex 原理


        vuex 仅仅是作为 vue 的一个插件而存在,不像 Redux,MobX 等库可以应用于所有框架,vuex 只能使用在 vue 上,很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统,

        vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计,依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作原理,vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件;

十三、使用 Vuex 只需执行 Vue.use(Vuex),并在 Vue 的配置中传入一个 store 对象的示例,store 是如何实现注入的?


        Vue.use(Vuex) 方法执行的是 install 方法,它实现了 Vue 实例对象的 init 方法封装和注入,使传入的 store 对象被设置到 Vue 上下文环境的store中。因此在VueComponent任意地方都能够通过this.store 访问到该 store。

十四、Vuex 如何区分 state 是外部直接修改,还是通过 mutation 方法修改的?vuex怎么知道state是通过mutation修改还是外部直接修改的?


通过$watch监听mutation的commit函数中_committing是否为true;严格模式下不允许直接修改。

Vuex 中修改 state 的唯一渠道就是执行 commit('xx', payload) 方法,其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true,然后才能修改 state,修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state,但是并没有修改_committing 标志位,所以只要 watch 一下 state,state change 时判断是否_committing 值为 true,即可判断修改的合法性。
 

十五、vuex怎样赋值?vuex存储数据的方法有哪些?
使用下面这两种方法存储数据:

  dispatch:异步操作,写法: this.$store.dispatch('actions方法名',值)

  commit:同步操作,写法:this.$store.commit('mutations方法名',值)

十六.Vuex中如何异步修改状态
actions与mutations作用类似,都是可以对状态进行修改。不同的是actions是异步操作的。

actions是可以调用Mutations里的方法的。

const actions={addActions(context){context.commit('add',10);//调用mutations中的方法setTimeout(()=>{context.commit('reduce')},5000)//    setTimeOut(()=>{context.commit('reduce')},3000);console.log('我比reduce提前执行');},reduceActions({commit}){commit('reduce');}
}


十七、Vuex中状态储存在哪里,怎么改变它?
答:存储在state中,改变Vuex中的状态的唯一途径就是显式地提交 (commit) mutation。

十八、Vuex中状态是对象时,使用时要注意什么?
答:对象是引用类型,复制后改变属性还是会影响原始数据,这样会改变state里面的状态,是不允许,所以先用深度克隆复制对象,再修改。

十九、怎么在组件中批量使用Vuex的state状态?
答:使用mapState辅助函数, 利用对象展开运算符将state混入computed对象中

import {mapState} from 'vuex' export default{ computed:{ ...mapState(['price','number']) } }

二十、你有使用过vuex的module吗?主要是在什么场景下使用?
答:把状态全部集中在状态树上,非常难以维护。按模块分成多个module,状态树延伸多个分支,模块的状态内聚,主枝干放全局共享状态

二十一、vuex一个例子方法
在testApp中建store文件 ==》 store文件下又有modules文件夹和getter.js 和 index.js ==》 store文件下建user.js

在store文件下的index.js中引入

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import global from './modules/global'
import getters from './getters'Vue.use(Vuex)const store = new Vuex.Store({modules: {user},getters
})export default store


 在store文件下的getters.js中引入

const getters = {self: state => state.user.self,token: state => state.user.token,currentCommunity: (state, getters) => {let cid = getters.currentCommunityIdreturn getters.communities.filter(item => {return item.communityId === cid})}
}export default getters


在modules文件下的user.js写代码

const user = {state:{self: null,token: '',},mutations:{SET_SELF: (state, self) => {state.self = self},SET_TOKEN: (state, token) => {state.token = token}},actions:{login ({ commit }, res) {commit('SET_SELF', res.self)commit('SET_TOKEN', res.token)}}
}
export default us

er  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_74583.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里大数据之路总结

一、数据采集 二、数据同步 2.1、数据同步方式: 数据同步的三种方式:直连方式、数据文件同步、数据库日志解析方式 关系型数据库的结构化数据:MYSQL、Oracle、DB2、SQL Server非关系型数据库的非结构化数据(数据库表形式存储&am…

【ESP 保姆级教程】疯狂毕设篇 —— 案例:基于ESP8266和EMQX的教室灯光控制系统

忘记过去,超越自己 ❤️ 博客主页 单片机菜鸟哥,一个野生非专业硬件IOT爱好者 ❤️❤️ 本篇创建记录 2023-02-26 ❤️❤️ 本篇更新记录 2022-02-26 ❤️🎉 欢迎关注 🔎点赞 👍收藏 ⭐️留言📝🙏 此博客均由博主单独编写,不存在任何商业团队运营,如发现错误,请…

智慧物联网源码带手机端源码 物联网系统源码

在智慧工厂领域,智慧城市领域,都需要对设备进行监控。比如工厂需要对周围环境温度、湿度、气压、电压,灯的开关进行监控。这时候就需要物联网平台来进行管理。 推荐一个基于java开发的物联网平台,前端HTML带云组态、可接入视频监…

酷炫的数据可视化,背后的制作工具究竟是什么?

数据可视化已经成为当代互联网的热词,不论是哪个行业都在使用。那么背后制作出数据可视化的可视化工具是什么呢?它又有哪些呢? 一、可视化工具是什么 可视化工具其实是 Visual Studio 调试器用户界面的组件,听起来很复杂对吧。但…

图节点嵌入相关算法学习笔记

引言 本篇笔记为coggle 2月打卡任务,正好也在学习cs224w,干脆就一起做了,以下是任务列表: 任务名称难度任务1:图属性与图构造低、1任务2:图查询与遍历低、2任务3:节点中心性与应用中、2任务4&…

redis(10)事务和锁机制

Redis事务定义 Redis 事务是一个单独的隔离操作:事务中的所有命令都会序列化、按顺序地执行。事务在执行的过程中,不会被其他客户端发送来的命令请求所打断。 Redis 事务的主要作用就是串联多个命令防止别的命令插队。 Multi、Exec、discard Redis 事务中…

15 Nacos客户端实例注册源码分析

Nacos客户端实例注册源码分析 实例客户端注册入口 流程图&#xff1a; 实际上我们在真实的生产环境中&#xff0c;我们要让某一个服务注册到Nacos中&#xff0c;我们首先要引入一个依赖&#xff1a; <dependency><groupId>com.alibaba.cloud</groupId>&l…

idea debug elasticsearch8.6.2 源码

前置依赖&#xff1a; gradle 7.5.1&#xff1a;Gradle | Releases openJDK 17&#xff1a;https://download.oracle.com/java/17/latest/jdk-17_windows-x64_bin.exe idea&#xff1a;IntelliJ IDEA 2022.1 (Ultimate Edition) 1、下载源码 8.6.2 zip包 并解压 地址&…

在 Flutter 中使用 webview_flutter 4.0 | 基础用法与事件处理

大家好&#xff0c;我是 17。 Flutter WebView 一共写了四篇文章 在 Flutter 中使用 webview_flutter 4.0 | 基础用法与事件处理在 Flutter 中使用 webview_flutter 4.0 | js 交互Flutter WebView 性能优化&#xff0c;让 h5 像原生页面一样优秀&#xff0c;已入选 掘金一周 …

「回顾RKDC2023」飞凌嵌入式受邀亮相第七届瑞芯微开发者大会

2023年2月23-24日&#xff0c;第七届瑞芯微开发者大会&#xff08;RKDC2023&#xff09;在福州隆重举行&#xff0c;飞凌嵌入式作为瑞芯微生态合作伙伴受邀参会&#xff0c;并与数千名开发者科技公司代表及行业领袖共同聚焦行业新兴产品需求&#xff0c;探讨新硬件发展趋势&…

STC32单片机 普通 I/O 口中断功能介绍和使用

STC32单片机 普通 I/O 口中断功能和使用✨STC32单片机普通 I/O 口中断&#xff0c;不是传统外部中断. &#x1f516;手册上描述&#xff1a;STC32G 系列支持所有的 I/O 中断&#xff0c;且支持 4 种中断模式&#xff1a;下降沿中断、上升沿中断、低电平中断、高电平中断。每组 …

网络方面的复习

这个博客参考了许多up主的视频和网上其他的博主的文章&#xff0c;还有我老师的ppt 这里是目录一、osi七层模型&#xff08;参考模型&#xff09;1.物理层2.数据链路层&#xff08;数据一跳一跳进行传递&#xff09;3.网络层&#xff08;端到端传输&#xff09;4.传输层&#x…

C语言深度剖析:关键字

C语言深度剖析:关键字C语言深度剖析:关键字前言定义与声明&#xff08;补充内容&#xff09;最宏大的关键字-auto最快的关键字-register关键字static被冤枉的关键字-sizeof整型在内存中的存储原码、反码、补码大小端补充理解变量内容的存储和取出为什么都是补码整型取值范围关于…

Pages Hexo 博客使用总结

参考&#xff1a;https://blog.csdn.net/yaorongke/article/details/119089190 Hexo Fluid 首页&#xff1a;https://hexo.fluid-dev.com/docs/ Hexo Fluid 配置&#xff1a;https://hexo.fluid-dev.com/docs/guide/#%E5%B1%95%E7%A4%BA-pv-%E4%B8%8E-uv-%E7%BB%9F%E8%AE%A1 文…

IM即时通讯开发如何解决大量离线消息导致客户端卡顿的

大部分做后端开发的朋友&#xff0c;都在开发接口。客户端或浏览器h5通过HTTP请求到我们后端的Controller接口&#xff0c;后端查数据库等返回JSON给客户端。大家都知道&#xff0c;HTTP协议有短连接、无状态、三次握手四次挥手等特点。而像游戏、实时通信等业务反而很不适合用…

改进的 A*算法的路径规划(路径规划+代码+毕业设计)

引言 近年来&#xff0c;随着智能时代的到来&#xff0c;路径规划技术飞快发展&#xff0c;已经形成了一套较为成熟的理论体系。其经典规划算法包括 Dijkstra 算法、A算法、D算法、Field D算法等&#xff0c;然而传统的路径规划算法在复杂的场景的表现并不如人意&#xff0c;例…

improve-2

BFC 块级格式化上下文&#xff0c;是一个独立的渲染区域&#xff0c;让处于 BFC 内部的元素与外部的元素相互隔离&#xff0c;使内外元素的定位不会相互影响。 IE下为 Layout&#xff0c;可通过 zoom:1 触发 触发条件: 根元素position: absolute/fixeddisplay: inline-block /…

区块链到底是个啥???

点击上方“小强的进阶之路”&#xff0c;选择“星标”公众号优质文章&#xff0c;及时送达预计阅读时间: 2分钟区块链起源2008 年&#xff0c;金融系统崩溃&#xff0c;世界惊恐万状。随后多年&#xff0c;银行、监管机构等负责金融系统运行的中央实体管理不善。那一时期&#…

BurpSuite安装

BurpSuiteBurpSuite简介BurpSuite安装BurpSuite简介 BurpSuite (简称Burp&#xff09;是基于Java开发的Web安全领域的集成工具&#xff0c;被称为信息安全界的瑞士军刀&#xff0c;它包含Proxy、Intruder、Repeater、Decoder.Comparer等多个模块&#xff0c;模块间通过共享相互…

戴尔dell inspiron-5598电脑 Hackintosh 黑苹果efi引导文件

原文来源于黑果魏叔官网&#xff0c;转载需注明出处。硬件型号驱动情况主板X99 K9 v2 Machinist处理器i5-10210U / *i7-10510U已驱动内存20GB已驱动硬盘1000GB SAMSUNG 860 QVO SATA已驱动显卡Intel UHD 620已驱动声卡Realtek ALC3204/236已驱动网卡RTL8168H Gigabit Ethernet已…