vue(八)--vuex

最新推荐文章于 2024-01-25 16:56:08 发布
最新推荐文章于 2024-01-25 16:56:08 发布
阅读量138 收藏
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42968500/article/details/104434111
版权

Vuex

在这里插入图片描述

原型prototype，但这个不是响应式式：即原值改变，但引用处的值不会自动跟着改变

在这里插入图片描述

首先要使用npm安装Vuex,接着再进行如下操作

vuex一般保存在store这个文件夹下
在这里插入图片描述

在main.js界面引用

在这里插入图片描述

在vue界面使用

在这里插入图片描述

通过mutations修改state的内容才能被devtools所监控，不要直接修改state的内容

在这里插入图片描述
在vue中使用mutations
在这里插入图片描述
在这里插入图片描述
在浏览器中安装devtools后，就可以跟踪状态了
在这里插入图片描述
小总结
在这里插入图片描述

vuex的几个核心概念

在这里插入图片描述

getters的使用类似于compute，可用于从store中获取一些state变异后的状态

在这里插入图片描述
在这里插入图片描述
在vue中进行使用
在这里插入图片描述

小技巧

在这里插入图片描述

调用getter的时候传入参数

调用处
在这里插入图片描述
声明处
在这里插入图片描述

Mutation状态更新

在这里插入图片描述

Mutation携带参数

在这里插入图片描述
mutation携带参数与getter有区别，mutation的可以直接将参数写在参数列表中而不需要再在内部调用一个function
在这里插入图片描述
在vue中调用
在这里插入图片描述

mutation的提交风格

在这里插入图片描述ODUwMA==,size_16,color_FFFFFF,t_70)
在这里插入图片描述
第二种风格，第二个参数已经是一个对象了
在这里插入图片描述

vuex数据的响应式

在这里插入图片描述
在这里插入图片描述

Mutation常量类型
在这里插入图片描述
注意事项
在这里插入图片描述

action

代码实现
在这里插入图片描述
在vue界面使用action
在这里插入图片描述

action有回调结果的情况

action中
在这里插入图片描述
vue界面中
在这里插入图片描述

modules

在这里插入图片描述
代码实现
在这里插入图片描述
在vue界面中使用
在这里插入图片描述

使用modules中的mutation

在这里插入图片描述
在vue中的使用方式跟普通mutation使用方式相同
在这里插入图片描述

使用modules中getter

在这里插入图片描述
在vue中的使用同普通的getter

使用modules中的action

在这里插入图片描述
在vue中的使用同普通的action
其中的context也包含了外层的getter和state

在这里插入图片描述

对象的解构

可以只解构其中的一部分数据
在这里插入图片描述

根据对象的解构，action也可以通过如下的方式使用

在这里插入图片描述

CQ623
关注
专栏目录
Vue笔记（五）vuex
Tml的博客
10-11 2997
概念、搭建环境、基本使用（举例）、getters、四个map方法、模块化和命名空间
Vue --- vuex
ty0714的博客
05-14 406
1. vue中各个组件之间传值 1.1 父子组件 父组件-->子组件，通过子组件的自定义属性：props 子组件-->父组件，通过自定义事件：this.$emit('事件名',参数1,参数2,...); 1.2 非父子组件或父子组件 通过数据总数Bus，this.$root.$emit('事件名',参数1,参数2,...) 1.3 非父子组件或父子组件 更好的方式是在vue中使用vuex (数据管理和数据存储) 方法1: 用...
Vue - Vuex - mutations和devtools
qq_33962481的博客
08-22 560
文章目录一、mutations介绍二、mutations的基本使用2.1 使用commit访问mutations里面定义的方法三、使用devtools插件监听mutaitons的操作 一、mutations介绍 通过mutations来修改状态相关的数据 二、mutations的基本使用 import Vue from 'vue' import Vuex from 'vuex' // 1. 安装插件 Vue.use(Vuex) // 2. 创建对象 const store = new Vuex.S
Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。
冯安晨
04-14 569
文章目录前言一、State单一状态树二、Getters基本使用1. 描述和案例2. 案例代码三、Mutations1. Mutations状态更新2. Mutations传递参数i、概念ii、代码示例3. Mutations提交风格4. Mutations响应规则i、概念ii、代码案例5. Mutations常量类型i、概念ii、代码示例6. Mutations同步函数四、Action的基本定义1. 概念2. 代码示例五、modules1. 描述2. Modules局部状态3. Actions的写法4. 代
VUE--VUEX
sinat_34896766的博客
01-25 2278
Vuex就是一个vue的状态（数据）管理工具，是vue项目实现大范围数据共享的技术方案。能够方便、高效的实现组件之间的数据共享。Vuex的好处（1）数据的存储一步到位，不需要层层传递（2）数据的流动十分清晰（3）存储在Vuex中的数据都是响应式的（数据更新后，使用数据的组件也会自动更新）适合存储到Vuex中的数据----需要共享的数据频繁、大范围的数据共享。（1）某个状态在很多个组件中使用（2）多个组件共同维护一份数据},},})// mutations里面放同步方法},},
laravel-vue-vuex-example:laravel-vue-vuex-示例
05-24
关于Laravel Laravel是一个具有表达力，优雅语法的Web应用程序框架。 我们认为，发展必须是一种令人愉快的，富有创造力的经历，才能真正实现。 Laravel通过减轻许多Web项目中使用的常见任务来减轻开发工作的痛苦，...
vue3-composition-admin:v基于vue3的管理端模板（Vue3 TS Vuex4 element-plus vue-i18n-next composition-api）vue3-admin vue3-ts-admin
03-20
vue3-composition-admin是一个管理端模板解决方案，它是基于vue3，ts和element-plus，项目都是以composition api风格编写的。 简介 项目的基础版本出自自于源于花裤衩大佬的vue-element-admin。 版本： vue2 + js...
vue-vuex-router-master.zip
06-18
"vue-vuex-router-master.zip" 文件看起来是一个包含了预配置的 Vue.js 项目，整合了 Vuex 和 Vue Router，旨在提供一个完整的开发环境，以适应各种开发需求。 首先，让我们深入了解 Vue.js。Vue.js 的核心设计理念...
vue3-vuex4-antd-express:vuex3-vuex4.0-ant设计-vue-express
03-09
Vue 3 +打字稿+ Vite 漏洞 1.请求错误，返回转态时候无法使用vue-i18n Uncaught SyntaxError: Must be called at the top of a `setup` function at createCompileError ( vue - i18n . js ? v = 465 da450 : 419 ...
vue2.0-vuex2.0-demo-jianshu
03-28
vue2.0-demo-jianshu 用Vue2.0全家桶建造的简书网站，这是一个前连通到的整体网站，包括了数据库配置。前端采用Vue2.0，服务端采用Express框架 构建设置 # install dependencies npm install # serve with hot ...
java-ssm+jsp在线医疗服务系统实现源码(项目源码-说明文档)
09-16
管理员管理医生，药品，预约挂号，购买订单以及用户病例等信息。医生管理坐诊信息，审核预约挂号，管理用户病例。用户查看医生坐诊，对医生预约挂号，在线购买药品。 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssm 前端技术：jsp 关键技术：jsp、spring、ssm、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
《基于改进粒子群算法的混合储能系统容量优化》完全复现 matlab 以全生命周期费用最低为目标函数，负荷缺电率作为风光互补发电
09-16
《基于改进粒子群算法的混合储能系统容量优化》完全复现 matlab。 以全生命周期费用最低为目标函数，负荷缺电率作为风光互补发电系统的运行指标，得到蓄电池储能和超级电容个数，缺电率和系统最小费用。 粒子群算法：权重改进、对称加速因子、不对称加速因子三种情况的优化结果和迭代曲线。 另包含2020年最新提出的阿基米德优化算法AOA和麻雀搜索算法SSA对该lunwen的实现。 （该算法收敛速度快，不存在pso的早熟收敛）
java-ssm+jsp游戏账号交易管理平台实现源码(项目源码-说明文档)
09-16
游戏售卖网站，在系统首页可以查看地下城勇士、英雄联盟、游戏账号、新闻资讯等内容 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssm 前端技术：jsp 关键技术：jsp、spring、ssm、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
【语音去噪】基于matlab谱减法+维纳滤波+最小均方误差估计法语音去噪【含Matlab源码 4294期】.mp4
09-16
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 语音处理系列程序定制或科研合作方向：语音隐藏、语音压缩、语音识别、语音去噪、语音评价、语音加密、语音合成、语音分析、语音分离、语音处理、语音编码、音乐检索、特征提取、声源定位、情感识别、语音采集播放变速等；
注册会计师会计第十五章 债务重组.doc
09-16
注册会计师会计第十五章 债务重组.doc
第8周实践课安排.pdf
09-16
第8周实践课安排.pdf
全面预算管理与控制习题答案.doc
09-16
全面预算管理与控制习题答案.doc
已知二叉树的先序与中序序列恢复二叉树
09-16
已知二叉树的先序与中序序列恢复二叉树
一个开源的中文歌声合成数据集。An_open-source_Chinese_singing_syn
最新发布
09-16
一个开源的中文歌声合成数据集。An_open-source_Chinese_singing_synt_VocalnetOpenDataset
vue-vuex详解
11-18
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它允许您在应用程序中管理和维护状态，例如用户信息、购物车、主题等。Vuex将状态存储在一个集中的存储库中，称为store。Vuex的核心概念包括state、mutations、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值