【Vue】如何提供访问vuex的数据

文章目录

  • 一、提供数据
  • 二、访问Vuex中的数据
    • 通过$store访问的语法
    • 1)模板中使用
    • 2)组件逻辑中使用
    • 3)js文件中使用
  • 三、通过辅助函数 - mapState获取 state中的数据

一、提供数据

State提供唯一的公共数据源,所有共享的数据都要统一放到Store中的State状态中存储。

打开项目中的index.js文件,在state对象中可以添加我们要共享的数据。

// 创建仓库 store
const store = new Vuex.Store({// state 状态, 即数据, 类似于vue组件中的data,// 区别:// 1.data 是组件自己的数据, // 2.state 中的数据整个vue项目的组件都能访问到state: {count: 101}
})

二、访问Vuex中的数据

问题: 如何在组件中获取count?

  1. 通过$store直接访问 —> {{ $store.state.count }}
  2. 通过辅助函数mapState 映射计算属性 —> {{ count }}

通过$store访问的语法

先找到仓库,再找到仓库里的state

获取 store:1.Vue模板中获取 this.$store2.js文件中获取 import 导入 store模板中:     {{ $store.state.xxx }}
组件逻辑中:  this.$store.state.xxx
JS模块中:   store.state.xxx

1)模板中使用

组件中可以使用 $store 获取到vuex中的store对象实例,可通过state属性属性获取count, 如下

<h1>state的数据 - {{ $store.state.count }}</h1>

2)组件逻辑中使用

将state属性定义在计算属性中 https://vuex.vuejs.org/zh/guide/state.html

<h1>state的数据 - {{ count }}</h1><script>
// 把state中数据,定义在组件内的计算属性中
computed: {count () {return this.$store.state.count}
}
</script>

3)js文件中使用

//main.jsimport store from "@/store"console.log(store.state.count)

每次都像这样一个个的提供计算属性, 太麻烦了,我们有没有简单的语法帮我们获取state中的值呢?


三、通过辅助函数 - mapState获取 state中的数据

由于上面获取数据的方式有点长,此时我们只需要将其封装到计算属性中,就可以通过属性名直接访问了

image-20240205120645447

mapState是辅助函数,帮助我们把store中的数据自动映射到 组件的计算属性中, 它属于一种方便的用法

用法 :

68321471957

1.第一步:导入mapState (mapState是vuex中的一个函数)

import { mapState } from 'vuex'

2.第二步:采用数组形式引入state属性

mapState(['count']) 

上面代码的最终得到的是 类似于,结果是得到一整个对象

console.log(mapState(['count', 'title']))

打印的这个对象,键就是属性名,值就是一个计算属性

image-20240205123101275

// 这一整个对象肯定不能直接赋值给computed,这样导致这个对象就直接给computed占满了,但是我们后面还需要提供自己的计算属性
count () {return this.$store.state.count
}

3.第三步:利用展开运算符将导出的状态映射给计算属性

  computed: {// 一旦丢在这里,就意味着下面还可以加其他的计算属性// count () {//    return this.$store.state.count// }...mapState(['count'])}
 <div> state的数据:{{ count }}</div>

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

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

相关文章

[office] 快速删除excel中的空行和列的方法 #其他#学习方法#经验分享

快速删除excel中的空行和列的方法 用户在网上下载好的Excel表格打开之后发现有很多空白行&#xff0c;怎么样将这些空白行或单元格一次性删除掉呢?下面教大家在Excel中用定位一次性可以把空白行删除 用户在网上下载好的Excel表格打开之后发现有很多空白行&#xff0c;怎么样将…

Vue3 使用audio播放语音+监听播放语音完成事件

需求&#xff1a;输入一段文字&#xff0c;点击语音框&#xff0c;将本地语音&#xff08;提前准备好的&#xff09; 播放出来 播放中效果 代码 <div class"listConAI" click"handleOpenSpeech" ><imgsrc"../../../../assets/images/blueo…

中文文案写作有哪些合适的AIGC工具?

这是计育韬老师第 8 次开展面向全国高校的新媒体技术公益巡讲活动了。而在每场讲座尾声&#xff0c;互动答疑环节往往反映了高校师生当前最普遍的运营困境&#xff0c;特此计老师在现场即兴答疑之外&#xff0c;会尽量选择有较高价值的提问进行文字答疑梳理。 *本轮巡讲主题除了…

【Vue】开启严格模式及Vuex的单项数据流

文章目录 一、引出问题二、开启严格模式 一、引出问题 目标 明确 vuex 同样遵循单向数据流&#xff0c;组件中不能直接修改仓库的数据 这样数据的流向才会更加清晰&#xff0c;将来对数据的修改&#xff0c;都在仓库内部实现的&#xff0c;更易于维护 直接在组件中修改Vuex中…

Spring进阶技巧:利用AOP提前介入的巧妙实践

Spring框架中的面向切面编程&#xff08;AOP&#xff09;是一种强大的机制&#xff0c;它允许开发者在不修改原有代码的情况下&#xff0c;对程序进行横向切面的功能扩展。AOP提供了一种方式&#xff0c;可以在目标Bean的生命周期早期阶段就实施切面逻辑&#xff0c;这为我们在…

【一百一十】【算法分析与设计】[SDOI2009] HH的项链,树状数组应用,查询区间的种类数,树状数组查询区间种类数

P1972 [SDOI2009] HH的项链 [SDOI2009] HH的项链 题目描述 HH 有一串由各种漂亮的贝壳组成的项链。HH 相信不同的贝壳会带来好运&#xff0c;所以每次散步完后&#xff0c;他都会随意取出一段贝壳&#xff0c;思考它们所表达的含义。HH 不断地收集新的贝壳&#xff0c;因此&am…

SMS - 基于阿里云实现手机短信验证码登录(无需备案,非测试)

目录 SMS 环境调试 从阿里云云市场中购买第三方短信服务 调试短信验证码功能 实战开发 封装组件 对外接口 调用演示 SMS 环境调试 从阿里云云市场中购买第三方短信服务 a&#xff09;进入阿里云首页&#xff0c;然后从云市场中找到 “短信” &#xff08;一定要从 云…

如何实现网站HTTPS访问

在当今网络安全至关重要的时代&#xff0c;HTTPS已经成为网站安全的基本标准。HTTPS&#xff08;超文本传输安全协议&#xff09;通过在HTTP协议基础上加入SSL加密层&#xff0c;确保了数据在用户浏览器和服务器之间的传输是加密的&#xff0c;有效防止数据被窃取或篡改&#x…

使用 PAI-DSW x Free Prompt Editing图像编辑算法,开发个人AIGC绘图小助理

教程简述 在本教程中&#xff0c;您将学习在阿里云交互式建模平台PAI-DSW x Free Prompt Editing&#xff08;CVPR2024中选论文算法&#xff09;图像编辑算法&#xff0c;开发个人AIGC绘图小助理&#xff0c;实现文本驱动的图像编辑功能单卡即可完成AIGC图片风格变化、背景变化…

Cesium开发环境搭建(一)

1.下载安装Node.js 进入官网地址下载安装包 Node.js — Download Node.js https://cdn.npmmirror.com/binaries/node/ 选择对应你系统的Node.js版本&#xff0c;这里我选择的是Windows系统、64位 安装完成后&#xff0c;WINR&#xff0c;输入node --version&#xff0c;显示…

React + SpringBoot实现图片预览和视频在线播放,其中视频实现切片保存和分段播放

图片预览和视频在线播放 需求描述 实现播放视频的需求时&#xff0c;往往是前端直接加载一个mp4文件&#xff0c;这样做法在遇到视频文件较大时&#xff0c;容易造成卡顿&#xff0c;不能及时加载出来。我们可以将视频进行切片&#xff0c;然后分段加载。播放一点加载一点&am…

tcp aimd 窗口的推导

旧事重提&#xff0c;今天用微分方程的数值解观测 tcp aimd 窗口值。 设系统 AI&#xff0c;MD 参数分别为 a 1&#xff0c;b 0.5&#xff0c;丢包率由 buffer 大小&#xff0c;red 配置以及线路误码率共同决定&#xff0c;设为 p&#xff0c;窗口为 W&#xff0c;则有&…

HAL STM32F1 通过查表方式实现SVPWM驱动无刷电机测试

HAL STM32F1 通过查表方式实现SVPWM驱动无刷电机测试 &#x1f4cd;相关篇《基于开源项目HAL STM32F4 DSP库跑SVPWM开环速度测试》 ✨针对STM32F1系列&#xff0c;没有专门的可依赖的DSP库&#xff0c;为了实现特定函数的浮点运算快速计算&#xff0c;通过查表方式来实现&#…

番外篇 | 利用华为2023最新Gold-YOLO中的Gatherand-Distribute对特征融合模块进行改进

前言:Hello大家好,我是小哥谈。论文提出一种改进的信息融合机制Gather-and-Distribute (GD) ,通过全局融合多层特征并将全局信息注入高层,以提高YOLO系列模型的信息融合能力和检测性能。通过引入MAE-style预训练方法,进一步提高模型的准确性。🌈 目录 🚀1.论文解…

如何解锁植物大战僵尸杂交版v2.0.88所有植物

如何解锁植物大战僵尸杂交版v2.0.88所有植物 前言安装相关软件快速解锁方法 前言 经过探索植物大战僵尸杂交版植物解锁和关卡有关&#xff0c;所以通过所有关卡就可以解锁所有植物。 安装相关软件 1.安装植物大战僵尸 2.安装Hex Editor Neo 快速解锁方法 本文参考如何修改…

<vs2022><问题记录>visual studio 2022使用console打印输出时,输出窗口不显示内容

前言 本文为问题记录。 问题概述 在使用visual studio 2022编写代码时&#xff0c;如C#&#xff0c;在代码中使用console.writeline来打印某些内容&#xff0c;以便于观察&#xff0c;但发现输出窗口不显示&#xff0c;而代码是完全没有问题的。 解决办法 根据网上提供的办法…

Java Web学习笔记23——Vue项目简介

Vue项目简介&#xff1a; Vue项目-创建&#xff1a; 命令行&#xff1a;vue create vue-project01 图形化界面&#xff1a;vue ui 在命令行中切换到项目文件夹中&#xff0c;然后执行vue ui命令。 只需要路由功能。这个路由功能&#xff0c;开始不是很理解。 创建项目部保存…

【原创】海为PLC与RS-WS-ETH-6传感器的MUDBUS_TCP通讯

点击“蓝字”关注我们吧 一、关于RS-WS-ETH-6传感器的准备工作 要完成MODBUS_TCP通讯,我们必须要知道设备的IP地址如何分配,只有PLC和设备的IP在同一网段上,才能建立通讯。然后还要选择TCP的工作模式,来建立设备端和PC端的端口号。接下来了解设备的报文格式,方便之后发送…

前端:快捷 复制chrome 控制台打印出来的 数组对象

程序中console.log出来的对象。按照以下步骤操作 1.右键点击需要处理的对象&#xff0c;会出现Store as global variable&#xff0c;点击 2.点击 Store as global variable 控制台会出现 3.在控制台 输入 copy(temp1) 这样对象就复制到了你的黏贴面板里面 在代码中直接 c…

基于STM32开发的智能语音控制系统

目录 引言环境准备智能语音控制系统基础代码实现&#xff1a;实现智能语音控制系统 4.1 语音识别模块数据读取4.2 设备控制4.3 实时数据监控与处理4.4 用户界面与反馈显示应用场景&#xff1a;语音控制的家居设备管理问题解决方案与优化收尾与总结 1. 引言 随着人工智能技术…