vuex的学习

最新推荐文章于 2024-05-23 16:57:23 发布
最新推荐文章于 2024-05-23 16:57:23 发布
阅读量187 收藏
点赞数 1
文章标签： 学习 前端 javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyfwang/article/details/138223832
版权

首先下载vuex，然后建立一个目录在vueX中

接着在index。js文件夹中引入

引入后导出这个文件

在main.js文件中导入，这样vue就有了状态管理

接着我创建了2个组件，在

里边规定了一个num:0

 在 打印出来就可以看见

映射函数mapState，必须和vux中的store中的的定义名称一样，要不就会有问题

如果没有报错就是没有打开严格模式

打开严格模式

 调用这里的方法

 使用这个方法来调用函数。

或者

这样也可以，直接在页面写一个mapMutations方法来调用

调用的方法

直接修改context.state.num+=10会报错

mutations和actions的区别  mutations只能进行同步提交 actions可以进行异步提交如果在mutations中进行异步提交会报错。

actions的映射

计算属性

这里的context不是上下文对象，而是状态

 相当于是引入了一个状态管理，相当于是路由注册了一下

编代码的小王
关注
vuex学习网址111111111
04-23
rank_ecpm_v1~rank_v31_ecpm-8-120932157-null-null.142^v100^pc_search_result_base6&utm_term=vuex%E8%AF%A6%E7%BB%86&spm=1018.2226.3001.4187
vuex学习
wanghexiang1121的博客
09-07 115
三、action是用于处理异步任务，不能直接修改state中的值，必须通过context.commit(‘add’)四、getter是用于对state中的值进行加工处理，形成新的数据，state中的值改变了getter的值也会改变。二、mutation是用于变更state中的数据,只有mutation中才能修改state的值。vuex是实现组件全局状态（数据）管理的一种机制，可以方便组件之间数据的共享。{{num1}}和{{num2}}一、state是提供唯一数据源。在computed:{
Vuex学习
xuan971130的博客
04-27 1497
一、Vuex是做什么的 状态管理工具：多个组件共享状态（可以先简单理解成变量） 所有的组件都继承自vue的原型：可以通过在prototype中加属性实现上述对象，但是通过这种方式，无法实现响应式。 二、vue需要管理什么状态呢 ...
vuex 学习
青蛙king的博客
08-08 751
vuex 的工作原理—— https://www.jianshu.com/p/d95a7b8afa06
Vuex 学习
weixin_45026839的博客
08-26 449
安装指令 ： npm install vuex --save 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state) Vuex 文档：https://vuex.vuejs.org/zh/ 一、Vuex 是做什么的？ 官方解释： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 通俗解释： 把需要多个组件共享的变量全部存储在一个对象里面。然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。为了保证.
vuex学习笔记
申小兮和林小兮的博客宝
03-16 512
Vuex的安装、配置、使用，核心概念（state、getter、mutation、action），Module模块化
vuex学习之Actions的用法详解
12-08
沿用vuex学习—简介的案例：这里是加10 减1 1.在store.js 中 代码为： import Vue from 'vue' import Vuex from 'vuex' //使用vuex模块 Vue.use(Vuex); //声明静态常量为4 const state = { count : 4 }; const ...
Vuex提升学习篇
08-28
本篇文章主要介绍了Vuex提升学习篇，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vuex详解.pptx
08-05
Vuex详解.pptx
CSS浮动（CSS从入门到精通学习第四天）
m0_49067926的博客
05-22 1030
圆角边框、盒子阴影、CSS浮动、浮动特性、清除浮动
引用实战学习
qiuzhiuser的博客
05-19 159
【代码】引用实战学习。
JVM学习-执行引擎
丢爸
05-21 1029
当然是否需要启动JIT编译器将字节码直接编译为对应平台的本地机器指令，则需要根据代码被调用。大部分的程序代码转换为物理机的目标代码或虚拟机能执行的指令集之前，都需要经过下图各个步骤。，将其直接编译为对应平台的本地机器指令，以此提升Java程序的执行性能。”，JIT编译器在运行时会针对那些频繁被调用的热点代码做出。Java代码编译是由Java源码编译器来完成，流程图如下。而定，关于那些需要被编译为本地代码的字节码，称为“Java字节码的执行是由JVM执行引擎来完成。
llama-factory学习个人记录
qq_55736201的博客
05-22 1062
1.llama-factory部署在LLaMA-Factory项目中，单显卡可以用命令或训练，多显卡只能用用命令的方式。
[BT]小迪安全2023学习笔记（第27天：Web攻防-SQL数据类型注入）
Bluetuan的博客
05-23 164
在SQL中，数字可以不需要单引号，但是字符串需要单引号闭合（不然识别不了）
qmt量化交易策略小白学习笔记第10期【qmt编程之获取股票订单流数据--内置Python】
fanglue3705的博客
05-23 304
获取股票订单流数据 获取股票在某个价位的订单数量 提示 1.该数据通过get_market_data和get_market_data_ex接口获取，period参数选择orderflow1m或者orderflow1d 2.获取历史数据前需要先用download_history_data下载历史数据，订单流数据仅提供orderflow1m周期数据下载，其他周期的订单流数据都是通过1m周期合成的 3.订单流版 权限数据 #内置python 原型 python
学习其他推理判断
最新发布
小琳猫的博客
05-23 1010
学习其他推理判断
Vitis HLS 学习笔记--控制驱动TLP-处理deadlock
hi94的博客
05-22 978
在数据流优化中，通道类型、握手机制、FIFO大小和死锁避免都是关键因素。通过Dataflow查看器和协同仿真数据，您可以有效地优化设计，提高性能并避免潜在问题。
DOS学习-目录与文件应用操作经典案例-comp
anananajiushiwo的博客
05-23 949
DOS系统的COMP是一个命令行工具，其主要功能是逐字节地比较两个文件或几组文件的内容。以下是关于COMP功能COMP命令用于比较两个文件的内容是否完全相同。它会逐个字节地对比文件，从而找出任何差异。使用方式：用户可以在DOS命令提示符下输入COMP命令，然后指定要比较的两个文件。如果在没有参数的情况下使用，COMP会提示用户输入要比较的文件。比较范围COMP可以比较相同驱动器或不同驱动器上的文件，以及相同目录或不同目录中的文件。这为用户提供了很大的灵活性，使其能够根据需要比较各种位置的文件。
《MetaGPT智能体开发入门》学习笔记 第四章 MetaGPT订阅模式
fox3012的博客
05-19 312
MetaGPT实战
vuex models
09-05
Vuex Models是一个用于在Vue.js应用程序中管理数据的库。它提供了一种模块化的管理模式，可以将store划分为多个模块（module），每个模块都有自己独立的state、mutation、action和getter。 使用Vuex Models非常简单。首先，您需要导入`genVuexModels`函数并使用它来生成存储字段。然后，在您的store配置中，将这些存储字段放在`models`对象中。例如，您可以在`store/index.js`文件中进行配置，如下所示： ```javascript // your imports import { genVuexModels } from 'vuex-models' // Vue.use(Vuex), etc // First argument ... const models = genVuexModels({ a: { state: {}, mutation: {}, getters: {}, // ... }, // ... }) export default new Vuex.Store({ // ... models, // ... }) ``` 通过这样配置，您就可以在Vue组件中轻松地访问和修改存储字段。例如，您可以使用`this.$models.a.state`来访问模块`a`的state，使用`this.$models.a.mutation`来提交模块`a`的mutation，使用`this.$models.a.getters`来获取模块`a`的getter。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vuex-models:vue组件和vuex存储之间的简单双向数据绑定](https://download.csdn.net/download/weixin_42151305/16637681)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue学习笔记 —— Vuex之Models（模块化管理模式）](https://blog.csdn.net/weixin_43340295/article/details/110002537)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值