Vue2学习笔记のvuex

目录

    • vuex
      • 1.概念
      • 2.何时使用?
      • 3.搭建vuex环境
      • 4.基本使用
      • 5.getters的使用
      • 6.四个map方法的使用
      • 7.模块化+命名空间

hello, 本文是Vue2学习笔记的第5篇:vuex。

vuex

1.概念

在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。

在这里插入图片描述

2.何时使用?

多个组件需要共享数据时

3.搭建vuex环境

注意:Vue2中只能用vuex的3版本,Vue3中只能用vuex的4版本。

1.创建文件:src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}//创建并暴露store
export default new Vuex.Store({actions,mutations,state
})

2.在main.js中创建vm时传入store配置项

......
//引入store
import store from './store'
......//创建vm
new Vue({el:'#app',render: h => h(App),store
})

4.基本使用

1.初始化数据、配置actions、配置mutations,操作文件store.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)const actions = {//响应组件中加的动作jia(context,value){// console.log('actions中的jia被调用了',miniStore,value)context.commit('JIA',value)},
}const mutations = {//执行加JIA(state,value){// console.log('mutations中的JIA被调用了',state,value)state.sum += value}
}//初始化数据
const state = {sum:0
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})

2.组件中读取vuex中的数据:$store.state.sum

3.组件中修改vuex中的数据:$store.dispatch('action中的方法名',数据)$store.commit('mutations中的方法名',数据)

备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写dispatch,直接编写commit

5.getters的使用

1.概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。

2.在store.js中追加getters配置

......const getters = {bigSum(state){return state.sum * 10}
}//创建并暴露store
export default new Vuex.Store({......getters
})

3.组件中读取数据:$store.getters.bigSum

6.四个map方法的使用

1.<strong>mapState方法:</strong>用于帮助我们映射state中的数据为计算属性

computed: {//借助mapState生成计算属性:sum、school、subject(对象写法)...mapState({sum:'sum',school:'school',subject:'subject'}),//借助mapState生成计算属性:sum、school、subject(数组写法)...mapState(['sum','school','subject']),
},

2.<strong>mapGetters方法:</strong>用于帮助我们映射getters中的数据为计算属性

computed: {//借助mapGetters生成计算属性:bigSum(对象写法)...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成计算属性:bigSum(数组写法)...mapGetters(['bigSum'])
},

3.mapActions方法:用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数

methods:{//靠mapActions生成:incrementOdd、incrementWait(对象形式)...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})//靠mapActions生成:incrementOdd、incrementWait(数组形式)...mapActions(['jiaOdd','jiaWait'])
}

4.<strong>mapMutations方法:</strong>用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数

methods:{//靠mapActions生成:increment、decrement(对象形式)...mapMutations({increment:'JIA',decrement:'JIAN'}),//靠mapMutations生成:JIA、JIAN(对象形式)...mapMutations(['JIA','JIAN']),
}

备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。

7.模块化+命名空间

1.目的:让代码更好维护,让多种数据分类更加明确。

2.修改store.js

const countAbout = {namespaced:true,//开启命名空间state:{x:1},mutations: { ... },actions: { ... },getters: {bigSum(state){return state.sum * 10}}
}const personAbout = {namespaced:true,//开启命名空间state:{ ... },mutations: { ... },actions: { ... }
}const store = new Vuex.Store({modules: {countAbout,personAbout}
})

3.开启命名空间后,组件中读取state数据:

//方式一:自己直接读取
this.$store.state.personAbout.list
//方式二:借助mapState读取:
...mapState('countAbout',['sum','school','subject']),

4.开启命名空间后,组件中读取getters数据:

//方式一:自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二:借助mapGetters读取:
...mapGetters('countAbout',['bigSum'])

5.开启命名空间后,组件中调用dispatch

//方式一:自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二:借助mapActions:
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

6.开启命名空间后,组件中调用commit

//方式一:自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二:借助mapMutations:
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

(注意:以上的部分的.vue文件由于没有对应的.vue代码模板,代码由于无法高亮,所以选择了html格式)

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

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

相关文章

linux 同时kill杀死多进程实践

使用场景 当程序中有使用到多进程且进程数较多的情况&#xff0c;如下图&#xff0c;且需要通过控制台杀死所有的 GSM_run.py 的进程时&#xff0c;利用 kill 命令一个一个的去结束进程是及其耗时且繁琐的&#xff0c;这时就需要我们的kill多进程的命令工作了。 批量 Kill 进程…

网络基础入门

认识协议 协议其实是一种约定 网络协议初识&#xff1a; 1.内核上以结构体形式呈现 2.操作系统要进行协议管理--先描述&#xff0c;在管理 3.协议的本质是软件&#xff0c;软件是可以分层的&#xff0c;&#xff08;联系C继承多态的知识 &#xff09; 可以参考 &#xff1…

【洛谷】P2678 跳石头

原题链接&#xff1a;https://www.luogu.com.cn/problem/P2678 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 二分答案。&#xff08;使用二分需要满足两个条件。一个是有界&#xff0c;一个是单调。 这题的题面&#xff1a;使得选手们在比赛过程中…

MES管理系统如何让传统汽车行业从“制造”走向“智造”

在传统制造业中&#xff0c;“数字化转型”是一个老生常谈的话题&#xff0c;然而&#xff0c;许多传统制造业仍处于“信息化”的阶段&#xff0c;距离真正的数字化还有很长的路要走。如果要在所有传统制造行业中寻找那些可以成为转型“先行者”的领域&#xff0c;那么深度与广…

Java进阶(7)——手动实现LinkedList 内部node类的实现 增删改查的实现 toString方法 源码的初步理解

目录 引出从ArrayList到Linkedlist手动实现ArrayList从ArrayList到LinkedList 总体设计Node类Node的方法&#xff1a;根据index找node 增删改查的实现增加元素删除元素修改元素查询元素 toString方法完整代码List接口类LinkedList的实现测试类 总结 引出 1.linkedList的节点&am…

4.4TCP半连接队列和全连接队列

目录 什么是 TCP 半连接队列和全连接队列&#xff1f; TCP 全连接队列溢出 如何知道应用程序的 TCP 全连接队列大小&#xff1f; 如何模拟 TCP 全连接队列溢出的场景&#xff1f; 全连接队列溢出会发生什么 ? 如何增大全连接队列呢 ? TCP 半连接队列溢出 如何查看 TC…

matlab 最小二乘拟合二维直线(直接求解法)

目录 一、算法原理二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理 平面直线的表达式为: y = k x + b

【java】【idea2023版】Springboot模块没有.iml文件的问题

目录 方法一&#xff1a; 1、首先鼠标选中对应的对应的模块 &#xff0c;按两下Ctrl键 2、project中选择对应的模块 3、运行mvn idea:module 命令​编辑 方法二&#xff1a; 1、可以右键点击open Terminal 2、然后在打开的Terminal里输入 方法一&#xff1a; 1、首先鼠…

交叉熵的简单理解:真实分布与非真实分布的交叉,完全对应,熵为0

目录 交叉熵的简单理解&#xff1a;真实分布与非真实分布的交叉&#xff0c;完全对应&#xff0c;熵为0 交叉熵的简单理解&#xff1a;真实分布与非真实分布的交叉&#xff0c;完全对应&#xff0c;熵为0 这个式子就是熵的表达式. 简单来说, 其意义就是在最优化策略下, 猜到颜…

2000-2021年上市公司绿色投资环保投资与营业收入之比数据(原始数据+计算代码+计算结果)

2000-2021年上市公司绿色投资环保投资与营业收入之比数据&#xff08;原始数据计算代码计算结果&#xff09; 1、时间&#xff1a;2000-2021年 2、来源&#xff1a;上市公司年报 3、指标&#xff1a;证券代码、企业名称、年份、管理费用环保投资、管理费用环保投资/营业收入…

Android 编译系统(Build System)剖析

Android Build System剖析 Android预构建应用是如何制作的&#xff0c;背后的构建系统又是什么&#xff1f; 本文旨在分享关于Android构建系统以及与原始设备制造商&#xff08;OEM&#xff09;集成的知识&#xff0c;简化理解AOSP复杂机制的过程。与手动查阅各种文件及其内部…

零售再增长,直播登“C位”,美团稳稳交出成绩单

8月24日&#xff0c;美团发布2023年中期业绩和二季报&#xff0c;财报显示其二季度实现营收680亿元&#xff0c;同比增长33.4%&#xff1b;实现净利润47.13亿元&#xff0c;同比扭亏为盈&#xff0c;调整后净利润达历史最高水平。其中&#xff0c;与消费市场走势息息相关的美团…

攻防演练期间一次对某企业的渗透测试

免责声明 由于传播、利用本文章说黑客所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者说黑客不为此承担任何责任&#xff0c;一旦造成后果请自行承担&#xff01; 前言 某次攻防演练中&#xff0c;主办方只提供了目标…

大数据精准营销获客能为企业带来哪些东西?

广告圈里一句名言:我知道我的广告浪费了一半&#xff0c;但我不知道浪费了哪一半。当前&#xff0c;越来越多的企业在大数据思维指导下进行广告投放&#xff0c;广告能通过对人群的定向&#xff0c;投放给准确的目标顾客&#xff0c;特别是互联网广告现在能够做到根据不同的人向…

YOLO目标检测——脑肿瘤检测数据集下载分享

脑肿瘤检测数据集是用于训练和评估脑肿瘤检测算法和模型的数据集&#xff0c;共同500张高清图像。 数据集点击下载&#xff1a;YOLO脑肿瘤检测数据集500图像.rar

HRS--人力资源系统(Springboot+vue)--打基础升级--(六)分页查询 + 重置按钮

一&#xff1a;先弄个简单的重置按钮 1.界面设计就放在搜索框同一列的位置 2. 在点击重置按钮时&#xff0c;清空搜索框内的内容&#xff0c;同时触发一次无条件查询(这个写法有bug&#xff0c;下面会有说明) 二&#xff1a;做分页 在MyBatis中&#xff0c;有多种方法可以实现分…

Lingo软件安装包分享(附安装教程)

目录 一、软件简介 二、软件下载 一、软件简介 Lingo是一款专门为解决线性和非线性优化问题而设计的专业软件&#xff0c;广泛应用于运筹学、工程管理、交通管理、生产调度、物流管理等领域。它提供了一个易于使用的界面和灵活的求解器&#xff0c;能够高效地求解大规模的线性…

Android 面试之Glide做了哪些优化?

前言 Glide可以说是最常用的图片加载框架了&#xff0c;Glide链式调用使用方便&#xff0c;性能上也可以满足大多数场景的使用&#xff0c;Glide源码与原理也是面试中的常客。 但是Glide的源码内容比较多&#xff0c;想要学习它的源码往往千头万绪&#xff0c;一时抓不住重点.…

快速排序笔记

一、quick_sort方法中如果 il,jr 会死循环的分析 1、示例代码 void quick_sort(int a[],int l,int r){if(l>r) return;int il,jr; //此处设置会导致死循环int x num[(lr)>>1];while(i<j){while(a[i] <x); //死循环的地方while(a[--j] >x);if(i<j) swap(a…

使用Nacos与Spring Boot实现配置管理

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…