【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…

web前端 孙俏:深度探索与实战之路

web前端 孙俏&#xff1a;深度探索与实战之路 在这个数字化、信息化的时代&#xff0c;web前端技术以其独特的魅力&#xff0c;吸引着越来越多的开发者投身其中。今天&#xff0c;我们将跟随孙俏的脚步&#xff0c;一同探索web前端的深度与广度&#xff0c;揭开其神秘的面纱。…

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

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

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

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

Git:版本控制的艺术与GitLab实战指南

在当今快速发展的软件开发领域&#xff0c;高效、协同的代码管理是项目成功的关键。Git&#xff0c;作为一款分布式版本控制系统&#xff0c;凭借其强大的功能和灵活性&#xff0c;成为了众多开发者首选的版本控制工具。本文将带您深入探索Git的核心概念、基础操作&#xff0c;…

B3870 [GESP202309 四级] 变长编码

[GESP202309 四级] 变长编码 题目描述 小明刚刚学习了三种整数编码方式&#xff1a;原码、反码、补码&#xff0c;并了解到计算机存储整数通常使用补码。但他总是觉得&#xff0c;生活中很少用到 2 31 − 1 2^{31}-1 231−1 这么大的数&#xff0c;生活中常用的 0 ∼ 100 0…

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

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

Python 中如何使用 lambda 函数

在 Python 中&#xff0c;可以使用 lambda 函数来创建匿名函数。lambda 函数的语法是&#xff1a;lambda 参数: 表达式。以下是一些使用 lambda 函数的例子&#xff1a; 通过 lambda 函数来计算两个数的和&#xff1a; add lambda x, y: x y print(add(2, 3)) # 输出 5通过…

Oracle 日志挖掘

oracle 11g 日志挖掘测试 需要开启补充日志 alter database add supplemental log data; SELECT SUPPLEMENTAL_LOG_DATA_MIN, SUPPLEMENTAL_LOG_DATA_PK, SUPPLEMENTAL_LOG_DATA_UI FROM V$DATABASE;在用户下执行一些删除&#xff0c;插入等操作 SQL> create table zxy( …

LLM评测数据集

1. C-Eval 数据集源地址: C-Eval Official Repository 数据范围: 该数据集包括学科类知识测试&#xff0c;涵盖广泛的学科知识&#xff0c;例如数学、物理、化学等。 数据集大小及数据形式: 数据集包含13,948道单选题&#xff0c;题目均为中文。 论文地址: C-Eval: A Multi-…

【一百一十】【算法分析与设计】[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…

calico node一直not ready

背景 我司某个大数据集群在做完添加到集群联邦管理后&#xff0c;该集群的calico-node全部处于not ready 状态&#xff0c;导致集群中节点之前的跨节点容器网络不通。 操作 将大数据所在的k8s集群添加到集群联邦的控制平面后&#xff0c;我们为了做各个子集群之间的容器网络…

换热器设计参数的选用

1 换热管类型 光管&#xff1a;适用于任何条件&#xff1b;应用面广 螺纹管&#xff1a;壳程流体的膜传热系数相当于管程传热系数1/3~3/5的场合&#xff1b;强化壳程传热系数&#xff0c;提高总传热系数&#xff1b;结垢速率低&#xff0c;结垢周期长。 波纹管&#xff1a;管…

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

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

Java 的分支

分支控制有三种&#xff1a;单分支&#xff0c;双分支&#xff0c;多分支。 单分支 基本语法&#xff1a; if (条件表达式){执行代码块; }程序示例&#xff1a; import java.util.Scanner;public class If01 {public static void main(String[] args) {Scanner sc new Sca…

【JAVA WEB实用技巧与优化方案】如何通过javacore、heapdump来排查JVM线程和内存问题

文章目录 介绍什么是javacore ? javacore可以用来做哪些分析?什么是HeapDump?一、输出JAVACORE 和 DUMP文件1.输出JAVACORE通过`kill -3 [pid]` 来输出javacore通过jstack 输出Javacore文件2.输出 dump 文件二、javacore文件和heapdump文件的分析工具使用详情javacore 工具i…

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;显示…