vue2学习(06)----vuex

目录

一、vuex概述

1.定义

优势:

2.构建环境步骤

3.state状态

4.使用数据

4.1通过store直接访问

4.2通过辅助函数

5.mutations修改数据(同步操作)

5.1定义

5.2步骤

5.2.1定义mutations对象,对象中存放修改state数据的方法

5.2.2mutations的传参语法

5.2.3利用辅助函数mapMutations

6.actions异步处理操作

6.1提供actions方法

6.2辅助函数mapActions

7.getters基本语法(没有修改只有获取)

7.1直接通过store访问getters

7.2通过辅助函数mapGetters访问

8.module模块

8.1所以以我们在开发项目过程中, 需要对模块进行拆分--->在store下面新建modules文件夹

8.1.1配置模块文件

8.1.2导入store中并且配置到modules中使用

8.2分模块之后,如何使用模块中的state、mutations、actions以及getters方法

8.2.1直接通过模块名访问

8.2.2通过辅助函数映射---默认跟级别的映射

8.2.3通过辅助函数进行子模块的映射

8.2.4关于actions方法中的context

8.3模块中更推荐的state配置写法


一、vuex概述

1.定义

vuex是一个状态管理工具,可以帮助我们管理vue通用的数据(多组件共享的数据)

优势:

  • 共同维护一份数据,数据集中化管理
  • 响应式变化
  • 操作简洁

2.构建环境步骤

  • 安装vuex----->yarn add vuex@3---->此时用的是vue2所以要使用vuex3的版本
  • 新建store目录文件夹存放单独的js文件存放vuex
  • Vue.use(Vuex)
  • 创建仓库---->cosnt store = new Vuex.Store()
  • 在main.js中导入并且挂载在实例上

通过this.$store访问到仓库---->所有组件都能访问到的通用的对象

3.state状态

1.定义

类似于与vue组件中的data,都是指的数据

2.提供数据

state提供的唯一的公共数据元,所有共享的数据都要统一放到store中的state中存储,在state对象中可以添加我们要共享的数据

const store = new Vuex.Store({state: {//数据}
})

注意:data中的数据是自己的数据,state中的数据是所有组件共享的数据

4.使用数据

通过store直接访问或者通过辅助函数(辅助函数访问更简单)

4.1通过store直接访问

//获取store
import store from '路径'
//利用this.store访问到仓库//在模板中使用
{{ $store.state.xxxx }}//组件逻辑中
this.$store.state.xxxx//js模块中书写方法
store.state.xxxx

4.2通过辅助函数

定义:把state中数据定义在组件内的计算属性中,{{计算属性}},mapState是辅助函数,帮助我们把store中的数据映射到组件的计算属性中

//导入辅助函数
import { mapState } from "vuex"//使用辅助函数,用数组方式引入state
mapState(['变量'])//展开运算符映射到计算属性中
computed:{ ...mapState(['变量']) }

5.mutations修改数据(同步操作)

5.1定义

明确vuex同样的遵循单向数据流,组件中不能修改仓库中的数据

通过strict:true,可以开启严格模式(在其他组件中直接修改仓库中的数据会报错,在最终上线的时候不用开启严格模式。因为严格模式是为了更好的提醒程序员出错点以及原因便于修改)

若是想要修改state中的数据那么只能通过mutations

5.2步骤

5.2.1定义mutations对象,对象中存放修改state数据的方法
const store = new Vuex.Store({state:{....},mutations:{mutations函数名(state){  //state.数据修改逻辑}}
})//组件中调用
this.$store.commit('mutations函数名')
5.2.2mutations的传参语法
//传递一个参数的情况
const store = new Vuex.Store({state:{....},mutations:{mutations函数名(state,参数){  //state.数据修改逻辑}}
})//组件中调用
this.$store.commit('mutations函数名',参数)//传递多个参数则采用对象模式
const store = new Vuex.Store({state:{....},mutations:{mutations函数名(state,obj){  //state.数据修改逻辑}}
})//组件中调用
this.$store.commit('mutations函数名',{参数1:值1,参数2:值2....})
5.2.3利用辅助函数mapMutations

mapMutations本质上就是把mutations中的方法提取出来,映射到组件的methods中

//在mutations中提供方法
const store = new Vuex.Store({state:{....},mutations:{mutations函数名(state,参数){  //state.数据修改逻辑}}
})//映射到组件的methods中
import { mapMutations } from 'vuex'
methods:{ ...mapMutations(['mutations函数名']) 
}//组件中调用
this.函数名(参数)    //可以直接利用click点击直接调用并传参

6.actions异步处理操作

6.1提供actions方法

//提供actions方法
const store = new Vuex.Store({state:{....},mutations:{....},actions:{actions函数名(context,参数){//异步处理逻辑(如发请求)}}
})//页面中调用
this.$store.dispath('actions函数名',参数)

actions处理异步操作但是并不会直接操作state,如果想要修改state,需要调用mutations方法

----->context.commit('mutations函数名',额外参数)

6.2辅助函数mapActions

同mutations一样,直接映射到组件中的methods中,可以直接调用

//在mutations中提供方法
const store = new Vuex.Store({state:{....},mutations:{....},actions:{actions函数名(context,参数){//异步处理逻辑(如发请求)}}
})//映射到组件的methods中
import { mapActions } from 'vuex'
methods:{ ...mapActions(['actions函数名']) 
}//组件中调用
this.函数名(参数)

7.getters基本语法(没有修改只有获取)

有时候需要从state中派生出一种状态,这些状态时依赖于state的,此时就会用到getters

7.1直接通过store访问getters

//提供actions方法
const store = new Vuex.Store({state:{....},mutations:{....},actions:{....},getters:{getters函数名(state){//处理逻辑return getters计算结果}}
})//页面模板中通过store访问getters
{{ $store.getters.getters函数名 }}

7.2通过辅助函数mapGetters访问

//提供actions方法
const store = new Vuex.Store({state:{....},mutations:{....},actions:{....},getters:{getters函数名(state){//处理逻辑return getters计算结果}}
})//映射到组件的methods中
import { mapGetters } from 'vuex'
computed:{ ...mapGetters(['getters函数名']) 
}//组件中调用
{{ getters函数名 }}

四个辅助函数记忆:

  • mapState 和 mapGetters 是在映射属性
  • mapMutations 和 mapActions 是在映射方法

8.module模块

由于vuex是使用单一状态树,应用的所有状态会集中到一个比较大的对象,当应用变得非常复杂时,state对象就可能变得臃肿且难以维护。

8.1所以以我们在开发项目过程中, 需要对模块进行拆分--->在store下面新建modules文件夹

8.1.1配置模块文件
//在模块文件中//配置state数据对象
cosnt state = {数据:{key:value,key1:value,...}
}//配置mutations方法
const mutations = {},//actions方法
const actions = {},//配置getters方法
const getters = {}//导出配置对象
export default {state,mutations,actions,getters
}
8.1.2导入store中并且配置到modules中使用
//导入store中import 文件名 from '路径'//配置modules对象const store = new Vue.Store({modules:{文件名,...}
})

8.2分模块之后,如何使用模块中的state、mutations、actions以及getters方法

分模块之后,各模块的辅助函数的参数state时指代子模块中的state

8.2.1直接通过模块名访问
//直接通过模块名访问state$store.state.模块名.xxx//直接通过模块名访问getters$store.getters['模块名/xxx']//直接通过模块名访问mutations$store.commit('模块名/xxx',额外参数)//直接通过模块名访问actions$store.dispatch('模块名/xxx',额外参数)
8.2.2通过辅助函数映射---默认跟级别的映射
//直接通过mapState访问state----默认根级别的映射mapState(['xxx'])//直接通过mapGetters访问getters----默认根级别的映射mapGetters(['xxx'])//直接通过mapMutations访问mutations----默认根级别的映射mapMutations(['xxx'])//直接通过mapActions访问actions----默认根级别的映射mapActions(['xxx'])
8.2.3通过辅助函数进行子模块的映射
//需要在子模块中开启命名空间namespaced:true//直接通过mapState访问state----子模块的映射mapState('模块名',['xxx'])//直接通过mapGetters访问getters----子模块的映射mapGetters('模块名',['xxx'])//直接通过mapMutations访问mutations----子模块的映射mapMutations('模块名',['xxx'])//直接通过mapActions访问actions----子模块的映射mapActions('模块名',['xxx'])
8.2.4关于actions方法中的context

context是上下文的意思,默认提交的就是自己模块的actions和mutations方法,基于当前模块环境指向不同的空间

8.3模块中更推荐的state配置写法

export default {namespaced:true,state () {    //利用函数的形式存储数据使其更加具有独立性return {//数据}}
}

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

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

相关文章

每日一题——Python实现PAT乙级1037 在霍格沃茨找零钱(举一反三+思想解读+逐步优化)

一个认为一切根源都是“自己不够强”的INTJ 个人主页:用哲学编程-CSDN博客专栏:每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 时间复杂度分析: 空间复杂度分析: 我要更强 哲学…

立创·天空星开发板-GD32F407VE-USART

本文以 立创天空星开发板-GD32F407VET6-青春版 作为学习的板子,记录学习笔记。 立创天空星开发板-GD32F407VE-USART 基础通信概念同步通信 & 异步通信串行通信 & 并行通信双工 & 单工通讯速率码元 串口通信数据帧 串口封装 基础通信概念 通信协议是网络…

Python编程学习第一篇——Python零基础快速入门(五)—变量

在上一节中讲的元组和元组操作中,经常看到 tup (1, 2, 3) 这样的代码,这里面其实涉及了编程语言中一个重要的概念就是变量,前面的等式中tup是变量,(1, 2, 3) 是赋与变量的值。前面的一些文章的代码中也都有用到变量,下…

STM32F103实现双击、长按、短按后续

经过上次(上一篇文章)的bug,这次进行了修改,基本原理就是使用基本定时器的计数功能,根据计算赋值合适的arr(预装载值)以及psc(预装载系数),使其实现100ms计时一次,在封装…

校园生活服务平台的设计

管理员账户功能包括:系统首页,个人中心,管理员管理,用户管理,跑腿管理,文娱活动管理,活动申请管理,备忘录管理 前台账户功能包括:系统首页,个人中心&#xff…

正确挑选百兆超薄款工业级网络/脉冲变压器(网络隔离滤波器)

Hqst华强盛(石门盈盛电子)导读:工业级百兆超薄款网络变压器的生产要特殊的超薄磁芯配正确线径的铜线,使用符合相应防潮标准的凝固胶水。 一 ̖ 首先来看下商业级的超薄款的百兆网络变压器: 商业级(消费级&…

麒麟操作系统运维工程师(KYCP)课程,实现职业突破

在IT行业中,掌握先进的技能和知识是实现职业突破的关键。如果你希望在麒麟操作系统上成为一名卓越的运维工程师,那么麒麟操作系统运维工程师(KYCP)课程将是你的理想全面提升学员在麒麟操作系统环境下的运维能力。课程内容涵盖安全…

mac读不出来ntfs mac硬盘读不出来盘

新买的Mac电脑由于需要导入旧电脑的数据,因此通常会读取备份硬盘,通过硬盘进行导入。不过由于各种原因,有些mac用户反馈无法正常读取或写入NTFS移动硬盘,下面就通过本篇教程,简单讲述当mac读不出来ntfs,mac…

开关电源中电感设计

开关电源设计中电感 只有充分理解电感在DC/DC电路中发挥的作用,才能更优的设计DC/DC电路。本文还包括对同步DC/DC及异步DC/DC概念的解释。 在开关电源的设计中电感的设计为工程师带来的许多的挑战。工程师不仅要选择电感值,还要考虑电感可承受的电流,绕线电阻,机械尺寸等…

监控易监测对象及指标之:全面监控华为FusionInsight实例

在大数据时代,华为FusionInsight作为一款高性能的大数据处理平台,承载着企业关键业务数据的处理和分析任务。为了确保FusionInsight实例的稳定运行,对其进行全面监控显得尤为重要。本文基于监控易工具,对华为FusionInsight实例的监…

产气荚膜梭菌定植与婴儿食物过敏之间的关联

谷禾健康 牛奶蛋白过敏(CMPA)是婴儿最常见的食物过敏类型之一。粪便病原菌培养显示产气荚膜梭菌阳性率超过30%,明显高于其他细菌。因此推测产气荚膜梭菌定植可能是婴儿牛奶蛋白过敏的发病因素之一。 一项真实世界的研究,杨敏团队从…

Linux操作系统:MongoDB在虚拟机环境下的安装及部署

上传 MongoDB 安装包 将从官网下载好的 MongoDB 上传到要安装的服务器目录中,建议目录为:/usr/local/ 解压 MongoDB 安装包 cd /usr/local/ tar -zxvf mongodb-linux-x86_64-4.0.0.tgz mv mongodb-linux-x86_64-4.0.0 mongodb 创建 MongoDB 必要目录 …

高通CSIPHY combo mode介绍

目录 使用MIPI Switch 使用高通平台CSIPHY的Combo Mode YYYY使用Combo Mode电路图如下: 如何设置combo PHY mode CSIInfo configuration when camera works in normal mode 平台SoC一般都有多个CSIPHY以满足当前手机相机设计多摄的情况,但是一款SoC CSIPHY的个数也是一定…

【python】错误SyntaxError: invalid syntax的解决方法总结

解决Python报错:【Python】错误SyntaxError: invalid syntax的解决方法总结 SyntaxError是Python编程中常见的错误之一,它表明代码中有语法错误。这种错误可能由多种原因引起,包括但不限于拼写错误、错误的缩进、缺少括号等。本文将介绍几种常…

Python 机器学习 基础 之 【常用机器学习库】 scikit-learn 机器学习库

Python 机器学习 基础 之 【常用机器学习库】 scikit-learn 机器学习库 目录 Python 机器学习 基础 之 【常用机器学习库】 scikit-learn 机器学习库 一、简单介绍 二、scikit-learn 基础 1、安装 scikit-learn 2、导入 scikit-learn 3、数据准备 4、数据分割 5、训练模…

使用Gitblit软件开启git服务器

文章目录 使用Gitblit软件开启git服务器,供局域网其他电脑当做git仓库服务1. java依赖环境安装2. Mac系统操作2.1 下载Gitblit、配置参数2.2 启动服务2.3 终止服务:停止脚本即可 3. window系统操作3.1 下载Gitblit、配置参数3.2 启动服务3.3 终止服务&am…

Einstein Summation 爱因斯坦求和 torch.einsum

Einstein Summation 爱因斯坦求和 torch.einsum flyfish 理解爱因斯坦求和的基本概念和语法,这对初学者来说可能有一定难度。对于不熟悉该表示法的用户来说,可能不如直接的矩阵乘法表达式易于理解。 整个思路是 向量的点积 -》矩阵乘法-》einsum 向…

揭秘抖音矩阵号低成本高效运作批量账号的秘诀!

在当今互联网时代,抖音矩阵号搭建已经成为了许多企业和个人追求高效率媒介管理的重要方式,但是高效、低成本地运作这些账号却是一个相当具有挑战性的任务。 在这篇文章中,我将从抖音矩阵账号准备,如何低成本制作视频以及在进行内容制作时,如何高效运作批量账号等大家比较…

翻译软件就用DT浏览器

翻译软件就用DT浏览器

GUI GUIDER、LVGL、LCD驱动关系

理解GUI Guider、LVGL和LCD驱动之间的关系对于开发嵌入式图形用户界面(GUI)非常重要。以下是它们之间关系的详细说明: 1. LVGL(Light and Versatile Graphics Library) 简介:LVGL 是一个轻量级、灵活的嵌…