Vuex的使用

1. 是什么:
vuex 是一个 vue 的 状态管理工具 ,状态就是数据。
大白话:vuex 是一个插件,可以帮我们 管理 vue 通用的数据 (多组件共享的数据)
2. 场景:
① 某个状态 在 很多个组件 来使用 (个人信息)
② 多个组件 共同维护 一份数据 (购物车)
3. 优势:
① 共同维护一份数据, 数据集中化管理
响应式变化
③ 操作简洁 (vuex提供了一些辅助函数)

 核心概念 - state 状态

1. 提供数据:
State 提供唯一的公共数据源,所有共享的数据都要统一放到 Store 中的 State 中存储。
在 state 对象中可以添加我们要共享的数据。
// 创建仓库 
const store = new Vuex.Store({
 // state 状态, 即数据, 类似于vue组件中的data 
 // 区别: 
 // 1. data 是组件自己的数据
 // 2. state 是所有组件共享的数据
 state: { count: 101 }
 })
2. 使用数据:
① 通过 store 直接访问
获取 store:
 (1) this.$store
 (2) import 导入 store

 模板中: {{ $store.state.xxx }}
 组件逻辑中: this.$store.state.xxx 
 JS模块中: store.state.xxx

② 通过辅助函数

mapState是辅助函数,帮助我们把 store中的数据 自动 映射到 组件的计算属性中

 

{{ count }} 
// 把state中数据,定义在组件内的计算属性中
 computed: { 
  count () {
 return this.$store.state.count 
} },
通过 strict: true 可以开启严格模式

 核心概念 - mutations

 mutations 用来修改 state 数据。 (state数据的修改只能通过 mutations )

1. 定义 mutations 对象,对象中存放修改 state 的方法
const store = new Vuex.Store({
 state: { count: 0 },
// 定义mutations
 mutations: { 
// 第一个参数是当前store的state属性 
addCount (state) {
 state.count += 1
 } 
} 
})
2. 组件中提交调用 mutations
this.$store.commit('addCount')
提交 mutation 是可以传递参数的 ` this.$store.commit( 'xxx', 参数 ) `
1. 提供 mutation 函数 (带参数 - 提交载荷 payload )
mutations: { ...
 addCount (state, n) {
 state.count += n
 } 
},
2. 页面中提交调用 mutation
this.$store.commit('addCount', 10)
提交参数只能一个,如果有多个参数,包装成一个对象传递
this.$store.commit('addCount', {
 count: 10, ... 
})
辅助函数 - mapMutations
mapMutations 和 mapState很像,它是把位于 mutations中的方法 提取了出来,映射到 组件methods
mutations: { 
subCount (state, n) {
 state.count -= n 
}, 
}
import { mapMutations } from 'vuex' 
methods: { 
...mapMutations(['subCount']) 
}
methods: { 
subCount (n) { 
this.$store.commit('subCount', n) 
},
 }
this.subCount(10) 调用
核心概念 - actions
actions 的基本语法,处理异步操作
mutations 必须是同步的 (便于监测数据变化,记录调试)
mutations: { 
changeCount (state, newCount) { 
state.count = newCount 
}
 }

1. 提供action 方法

actions: { setAsyncCount (context, num) 
{ // 一秒后, 给一个数, 去修改 num 
setTimeout(() => { 
context.commit('changeCount', num) }, 1000) 
} 
}

2. 页面中 dispatch 调用

this.$store.dispatch('setAsyncCount', 200)
辅助函数 - mapActions
mapActions 是把位于 actions中的方法 提取了出来,映射到 组件methods
actions: { 
changeCountAction (context, num) {
 setTimeout(() => { 
context.commit('changeCount', num)
 }, 1000) 
} 
}


import { mapActions } from 'vuex' 
methods: { 
...mapActions(['changeCountAction']) 
}



methods: { 
changeCountAction (n) {
 this.$store.dispatch('changeCountAction', n) 
}, 
}

this.changeCountAction(666) 调用
核心概念 - getters
getters 的基本语法 (类似于计算属性)
除了state之外,有时我们还需要从state中 派生出一些状态 ,这些状态是依赖state的,此时会用到getters
例如:state中定义了list,为 1-10 的数组,组件中,需要显示所有大于5的数据

 

 核心概念 - 模块 module (进阶语法)

由于 vuex 使用 单一状态树 ,应用的所有状态 会集中到一个比较大的对象 。当应用变得非常复杂时,
store 对象就有可能变得相当臃肿。(当项目变得越来越大的时候,Vuex会变得越来越难以维护)
掌握模块中 state 的访问语法

 

 

 

① 直接通过模块名访问 $store.state.模块名.xxx
② 通过 mapState 映射
默认根级别的映射 mapState([ 'xxx' ])
子模块的映射 mapState('模块名', ['xxx']) - 需要开启命名空间
掌握模块中 getters 的访问语法
使用模块中 getters 中的数据:
① 直接通过模块名访问 $store.getters['模块名/xxx ']
② 通过 mapGetters 映射
默认根级别的映射 mapGetters([ 'xxx' ])
子模块的映射 mapGetters('模块名', ['xxx']) - 需要开启命名空间
掌握模块中 mutation 的调用语法
注意:默认模块中的 mutation 和 actions 会被挂载到全局, 需要开启命名空间 ,才会挂载到子模块。
调用子模块中 mutation:
① 直接通过 store 调用 $store.commit('模块名/xxx ', 额外参数)
② 通过 mapMutations 映射
默认根级别的映射 mapMutations([ 'xxx' ])
子模块的映射 mapMutations('模块名', ['xxx']) -
掌握模块中 action 的调用语法 (同理 - 直接类比 mutation 即可)
注意:默认模块中的 mutation 和 actions 会被挂载到全局, 需要开启命名空间 ,才会挂载到子模块。
调用子模块中 action :
① 直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)
② 通过 mapActions 映射
默认根级别的映射 mapActions([ 'xxx' ])
子模块的映射 mapActions('模块名', ['xxx']) - 需要开启命名空间

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vue基础 --- 路由

1. 前端路由的概念与原理 1.1 什么是路由 路由(英文:router)就是对应关系。 1.2 SPA 与前端路由 SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成。 此时,不同…

echarts统计图x轴文字过长,以省略号显示,鼠标经过提示全部内容

效果图如下 主要代码如下: //1.js代码内加入extension方法,chart参数是echarts实例 function extension(chart) {// 注意这里,是以X轴显示内容过长为例,如果是y轴的话,需要把params.componentType xAxis改为yAxis/…

国产内存惹人爱,光威的价格战太凶猛,海外品牌已无力招架

现阶段,真的很适合升级内存条和SSD!当然了,我说的是国产的品牌,经过这几年的发展,国产内存和SSD的表现都有了质的飞跃,像是光威之类的品牌,更是成功在玩家群体中获得了良好的口碑,而…

使用镜像搭建nacos集群

安装并配置 docker 1 先安装docker //1.查看操作系统的发行版号 uname -r//2.安装依赖软件包 yum install -y yum-utils device-mapper-persistent-data lvm2//3.设置yum镜像源 //官方源(慢) yum-config-manager --add-repo http://download.docker.co…

mysql进阶1——proxysql中间件

文章目录 一、基本了解二、安装部署三、proxysql管理配置3.1 内置库3.1.1 main库表3.1.2 stats库表3.1.3 monitor库 3.2 常用管理变量3.2.1 添加管理用户3.2.2 添加普通用户3.2.3 修改监听套接字 四、多层配置系统4.1 系统结构4.2 修改变量加载配置4.3 启动加载流程 一、基本了…

Jmeter(二十三):快速生成测试报告

一、jmeter配置 首先要保证jmeter命令是ok的,如果你在cmd中输入jmeter -v,有出现如下截图所示的信息,那就说明jmeter环境ok; 二、jmeter执行结合命令 生成HTML测试报告 1.完成脚本的调试、参数化、断言等操作。然后在聚合报告中指定日志文件存储路径,路径中最好不要包含有…

利用官网文档快速上手 Android 开发

官网学习链接:官网链接 官网教程

electron-egg 加密报错

electron框架:electron-egg 解决方式 npm uninstall bytenode npm install bytenode1.3.6node:internal/modules/cjs/loader:928 throw err; ^ Error: Cannot find module ‘node:assert/strict’ Require stack: D:\electron-egg-test\new-electron-egg\electr…

SpringBoot与文档excel,pdf集成案例分享

一、文档类型介绍 1、Excel文档 Excel一款电子表格软件。直观的界面、出色的计算功能和图表工具,在系统开发中,经常用来把数据转存到Excel文件,或者Excel数据导入系统中,这就涉及数据转换问题。 2、PDF文档 PDF是可移植文档格…

干翻Dubbo系列第四篇:Dubbo3第一个应用程序细节补充

前言 不从恶人的计谋,不站罪人的道路,不坐亵慢人的座位,惟喜爱耶和华的律法,昼夜思想,这人便为有福!他要像一棵树栽在溪水旁,按时候结果子,叶子也不枯干。凡他所做的尽都顺利。 如…

Higress非K8S安装

Higress非K8S安装 文章目录 Higress非K8S安装环境安装安装higress进入到higress 的目录下修改下nacos的地址启动Higress登录higress管理页面 Higress 是基于阿里内部构建的下一代云原生网关,官网介绍:https://higress.io/zh-cn/docs/overview/what-is-hi…

HuggingGPT Solving AI Tasks with ChatGPT and its Friends in Hugging Face

总述 HuggingGPT 让LLM发挥向路由器一样的作用,让LLM来选择调用那个专业的模型来执行任务。HuggingGPT搭建LLM和专业AI模型的桥梁。Language is a generic interface for LLMs to connect AI models 四个阶段 Task Planning: 将复杂的任务分解。但是这里…

外文期刊影响因子去哪里查询,如何查询

期刊影响因子(Impact factor,IF),是代表期刊影响大小的一项定量指标。也就是某刊平均每篇论文的被引用数,它实际上是某刊在某年被全部源刊物引证该刊前两年发表论文的次数,与该刊前两年所发表的全部源论文数之比。那么&#xff0c…

《嵌入式 - 工具》J-link读写MCU内部Flash

1 J-Link简介 J-Link是SEGGER公司为支持仿真ARM内核芯片推出的JTAG仿真器。配合IAR EWAR,ADS,KEIL,WINARM,RealView等集成开发环境支持所有ARM7/ARM9/ARM11,Cortex M0/M1/M3/M4, Cortex A5/A8/A9等内核芯片的仿真,是学…

redis 第二章

目录 1.持久化 2.主从复制 3.总结 1.持久化 通过 aof 和 rdb 将内存里的数据放到磁盘中 aof: rdb: 2.主从复制 将一台 redis 服务器的数据,复制到其他的 redis 服务器 3.总结 主从复制是高可用 redis 的基础,哨兵和集群都是在主从复制基础上实现高可…

线性代数(基础篇):第一章:行列式 、第二章:矩阵

文章目录 线性代数0:串联各章等价条件 第1章 行列式1.行列式的定义(1)行列式的本质定义(2)行列式的逆序数法定义(3)行列式的展开定理 (第三种定义) 2.行列式的性质3.行列式的公式4.基本行列式(1)主对角线行列式(2)副对角线行列式(3)拉普拉斯行列式(4)范德蒙德行列式…

深度学习入门(一):神经网络基础

一、深度学习概念 1、定义 通过训练多层网络结构对位置数据进行分类或回归,深度学习解决特征工程问题。 2、深度学习应用 图像处理语言识别自然语言处理 在移动端不太好,计算量太大了,速度可能会慢 eg.医学应用、自动上色 3、例子 使用…

关于Ubuntu 18.04 LTS环境下运行程序出现的问题

关于Ubuntu 18.04 LTS环境下运行程序出现的问题 1.运行程序时出现以下情况 2.检查版本 strings /lib/x86_64-linux-gnu/libc.so.6 |grep GLIBC_​ 发现Ubuntu18.04下的glibc版本最高为2.27,而现程序所使用的是glibc2.34,所以没办法运行, 3.解决办法 安装glibc2.34库, …

HCIA练习4

题目如下: 目录 第一步:IP的规划 第二步:缺省路由 第三步:开启telnet 第四步:编写ACL表 第五步:测试 思路分析: 华为默认允许所有,所以我们可以先写拒绝要求,再写允…

TD1850多用表校准系统参考标准

参考标准 分类 标准名称 国家标准 GB/T 13978-2008 数字多用表 GB/T 15637-2012 数字多用表校准仪通用规范 计量法规 JJF 1075-2015 钳形电流表校准规范 JJF 1284-2011 交直流电表校验仪校准规范 JJF 1587-2016 数字多用表校准规范 JJG 124-2005 电流表、电压表、功率表及…