Vuex的学习

简介: Vuex的学习

1、 vuex的理解

vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,

采用集中式存储管理应用的所有组件的状态,

以相应的规则保证状态以一种可预测的方式发生变化

通过vuex可以解决组件之间数据共享的问题,方便管理以及维护



2、 vuex的优点和缺点

优点:

1)解决了非父子组件的消息传递

2)减少了AJAX请求次数

3)数据方便管理以及维护

缺点:

1)小型项目使用vuex会显得繁琐冗余

2)刷新浏览器,vuex中的state会重新变为初始状态



3、 使用 vuex的情况

1)当页面的组件比较多

2)业务比较复杂

3)数据难以维护



4、 vuex的原理

每个vuex应用的本质是store(仓库),包含应用中大部分的状态

state, getters,mutations,actions,module



5、vuex的用法

1)安装vuex

2)在src目录下创建store文件夹,在该文件夹内创建index.js

3)在index.js文件内引入vuex

4)调用Vue.use()方法注册vuex

5)对vuex进行实例化,通过export default导出

6)在main.js文件内引入index.js文件

7)挂载到new Vue实例上面

8)初始化vuex的状态和属性


6 、项目中使用vuex的一些情况

登录模块,购物车模块,订单模块,商品模块



7、 vuex的运行机制

1)在vue组件里面,通过dispatch来触发actions提交修改数据

2)然后再通过actions的commit来触发mutations来修改数据

3)mutations接收到commit的请求,会自动通过Mutate来修改state里面的数据

4)最后由store触发每一个调用它的组件的更新



8、 vuex中的属性

State、Getter、Mutation 、Action、Module 五种

1)state:基本数据

2)getters:从基本数据派生的数据

3)mutations:提交更改数据的方法

4)actions: 像一个装饰器,包裹mutations,使之可以异步

5)modules:模块化Vuex



9、 获取state的值?调用gettes里面定义的方法?

调用mutations的方法?调用actions的方法?

调用mutations的方法?调用actions的方法?

state的值获取的方式有两种:

第一种是组件里面进行获取 this.$store.state.状态

第二种是在vuex内部进行获取

函数参数里面会有一个state参数,通过这个state参数可以直接拿到state的值


getters的方法在组件内调用的话是通过this.$store.getters进行获取,

作用是用来获取state的值


mutations的方法在组件内调用时通过this.$store.commit()进行调用

作用是用来通过同步的方式去改变state里面状态,


actions的方法在组件内调用是通过this.$store.dispatch()进行调用,

作用是用来异步的改变状态,actions也支持promise



10、 vuex里面module属性的作用

1)module属性相当于是vuex里面的模块化方法

2)module属性可以让每一个模块拥有自己的state、mutation、action、getters

3)使得结构非常清晰,方便管理


 

11、 Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中

1)如果请求来的数据仅仅在请求的组件内使用,就不需要放入vuex 的state里

2)如果被其他地方复用就很需要,请求放入action里,方便复用并包装成promise返回,

在调用处用async await处理返回的数据

3)如果不要复用这个请求,可以直接写在vue文件里



12、Vuex中异步修改状态

1)actions去异步的改变state的状态, 调用actions内定义的方法,需要通过this.$store.dispatch()

2)mutations是同步改变状态,mutations方法是通过this.$store.commit()来进行调用,

3)actions通过commit来调用mutations的方法



13、 vuex中actions和mutations的区别

1)action提交的是mutation,而不是直接变更状态

2)action 可以包含任意异步操作

3)mutations只能是同步操作



14、 页面刷新后vuex的state数据丢失解决的方法

1)使用localStorage 或者sessionStorage

2)借用辅助插vuex-persistedstate



15、 vuex怎么知道state是通过mutation修改还是外部直接修改的

通过$watch监听mutation的commit函数中_committing是否为true


相关文章
|
7月前
|
人工智能 算法
中国AI应用排行榜3月榜单发布,「AI四大天王」格局正式形成
2025年3月,中国AI应用排行榜发布!由AIGCRank制作,基于国内主流App市场及算法备案数据筛选200+款代表性AI应用排名。榜单显示夸克、DeepSeek、豆包、腾讯元宝形成“AI四大天王”格局,头部生态壁垒加深。通用助手主导市场,垂类赛道如教育、生成工具等多点开花。报告揭示中国AI市场进入“头部固化+垂类爆发”阶段,未来商业化路径将成为垂类应用突破关键。
1313 0
|
敏捷开发 Java 测试技术
云效产品使用常见问题之实现加速失败如何解决
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
数据采集 供应链 监控
5 天学会阿里云 RPA:电商行业应用
在当今数字化的商业环境中,电商行业迅速发展。为了在激烈的市场竞争中脱颖而出,电商企业不断寻求提高运营效率和提供优质客户体验的方法。阿里云 RPA(机器人流程自动化)的出现为电商行业带来了全新的解决方案。
|
传感器 芯片 数据格式
stm32读取DHT11温湿度传感器
stm32读取DHT11温湿度传感器
581 1
|
存储 网络协议 安全
UDP通信机制详解
UDP通信机制详解
1204 0
|
JSON API 图形学
Unity 接入高德开放API - 天气查询
Unity 接入高德开放API - 天气查询
816 1
Unity 接入高德开放API - 天气查询
|
云安全 运维 安全
《2023云原生实战案例集》——01 汽车/制造——东风日产 借力ASM实现流量精细化管控
《2023云原生实战案例集》——01 汽车/制造——东风日产 借力ASM实现流量精细化管控
|
JSON 前端开发 数据可视化
.NET轻松实现支付宝服务窗网页授权并获取用户相关信息
.NET轻松实现支付宝服务窗网页授权并获取用户相关信息
259 0
.NET轻松实现支付宝服务窗网页授权并获取用户相关信息
|
大数据 云栖大会 机器学习/深度学习
新一代计算引擎亮相云栖大会 ——带你深度了解阿里巴巴计算平台
2018年9月19日至22日,在杭州云栖小镇,170余场前沿技术、产品及行业峰会,如火如荼地进行着。这次云栖大会的主题是“驱动数字中国”。作为阿里巴巴经济体新一代计算引擎的计算平台,深度参与了此次峰会。下面小编带大家一起回顾大会的精彩内容。
2423 0
|
应用服务中间件 Linux nginx