Vue2向Vue3过度Vuex核心概念state状态

目录

    • 1 核心概念 - state 状态
      • 1.目标
      • 2.提供数据
      • 3.访问Vuex中的数据
      • 4.通过$store访问的语法
      • 5.代码实现
        • 5.1模板中使用
        • 5.2组件逻辑中使用
        • 5.3 js文件中使用
    • 2 通过辅助函数 - mapState获取 state中的数据
      • 1.第一步:导入mapState (mapState是vuex中的一个函数)
      • 2.第二步:采用数组形式引入state属性
      • 3.第三步:利用**展开运算符**将导出的状态映射给计算属性
    • 3 开启严格模式及Vuex的单项数据流
      • 1.目标
      • 2.直接在组件中修改Vuex中state的值
      • 3.开启严格模式


1 核心概念 - state 状态

在这里插入图片描述

1.目标

明确如何给仓库 提供 数据,如何 使用 仓库的数据

2.提供数据

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

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

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

3.访问Vuex中的数据

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

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

4.通过$store访问的语法

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

5.代码实现

5.1模板中使用

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

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

5.2组件逻辑中使用

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

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

5.3 js文件中使用

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

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

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

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

用法 :

在这里插入图片描述

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

import { mapState } from 'vuex'

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

mapState(['count']) 

上面代码的最终得到的是 类似于

count () {return this.$store.state.count
}

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

  computed: {...mapState(['count'])}
 <div> state的数据:{{ count }}</div>

3 开启严格模式及Vuex的单项数据流

1.目标

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

2.直接在组件中修改Vuex中state的值

在这里插入图片描述

Son1.vue

button @click="handleAdd">值 + 1</button>methods:{handleAdd (n) {// 错误代码(vue默认不会监测,监测需要成本)this.$store.state.count++// console.log(this.$store.state.count) },
}

3.开启严格模式

通过 strict: true 可以开启严格模式,开启严格模式后,直接修改state中的值会报错

state数据的修改只能通过mutations,并且mutations必须是同步的

在这里插入图片描述

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

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

相关文章

Docker容器学习:搭建自己专属的LAMP环境

目录 编写Dockerfile 1.文件内容需求&#xff1a; 2.值得注意的是centos6官方源已下线&#xff0c;所以需要切换centos-vault源&#xff01; 3.Dockerfile内容 4.进入到 lamp 开始构建镜像 推送镜像到私有仓库 1.把要上传的镜像打上合适的标签 2.登录harbor仓库 3.上传镜…

鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统 em

工程项目管理软件&#xff08;工程项目管理系统&#xff09;对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营&#xff0c;全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#xff…

windows下Qt、MinGW、libmodbus源码方式的移植与使用

windows下Qt、MinGW、libmodbus源码方式的移植与使用 1、前言 libmodbus官网&#xff1a;https://libmodbus.org/ github下载&#xff1a;https://github.com/stephane/libmodbus 截止2023年8月26日时&#xff0c;libmodbus最新版本为3.1.10&#xff0c;本篇博客基于此版本进…

层叠上下文、层叠顺序

原文合集地址如下&#xff0c;有需要的朋友可以关注 本文地址 什么是层叠上下文 层叠上下文&#xff08;Stacking Context&#xff09;是指在 HTML 和 CSS 中&#xff0c;用于控制和管理元素层叠顺序以及呈现的一种机制。在一个网页中&#xff0c;许多元素&#xff08;例如文…

kafka复习:(11)auto.offset.reset的默认值

在ConsumerConfig这个类中定义了这个属性的默认值&#xff0c;如下图 也就是默认值为latest,它的含义是&#xff1a;如果没有客户端提交过offset的话&#xff0c;当新的客户端消费时&#xff0c;把最新的offset设置为当前消费的offset. 默认是自动提交位移的&#xff0c;每5秒…

分析系统 - 使用Python爬虫

在竞争激烈的市场环境中&#xff0c;了解和分析竞争对手的销售策略和市场表现对于企业的成功至关重要。本文将介绍如何利用Python爬虫建立低成本的销售竞争对手分析系统&#xff0c;探索其方法、工具和好处&#xff0c;并同时解决可能出现的问题。 销售竞争对手分析的目标是获取…

STM32--MPU6050与I2C外设

文章目录 前言MPU6050参数电路MPU6050框图 IIC外设框图 IIC的基本结构软件IIC实现MPU6050硬件IIC实现MPU6050 前言 在51单片机专栏中&#xff0c;用过I2C通信来进行实现AT24C02的数据存储&#xff1b; 里面介绍的是利用程序的编程来实现I2C的时序&#xff0c;进而实现AT24C02与…

咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动

由于本着只学习微信小程序的目的&#xff0c;上面的几篇博文都是跟着黑马程序的课程走的&#xff01;后面的就讲解uni-app的实验呢&#xff01;一个人的精力是有限的&#xff0c;于是换了们课程继续深造微信小程序&#xff01;&#xff01;&#xff01; 以下是在 .wxml中的一些…

论文阅读及复现——《CT_ICP: Real-time Elastic LiDAR Odometry with Loop Closure》

论文阅读之——《CT_ICP: Real-time Elastic LiDAR Odometry with Loop Closure》带闭环的实时弹性激光雷达里程计 1. 主要贡献2. 相关说明3. 激光里程计3.1 里程计公式构建3.2 局部地图与健壮性 4. 回环检测与后端5. 实验结果5.1 里程计实验结果5.2 回环检测实验结果 6. 总结…

【黑马头条之热点文章kafkaStream】

本笔记内容为黑马头条项目的热点文章-实时计算部分 目录 一、实时流式计算 1、概念 2、应用场景 3、技术方案选型 二、Kafka Stream 1、概述 2、Kafka Streams的关键概念 3、KStream 4、Kafka Stream入门案例编写 5、SpringBoot集成Kafka Stream 三、app端热点文章…

计算机竞赛 基于大数据的股票量化分析与股价预测系统

文章目录 0 前言1 课题背景2 实现效果3 设计原理QTChartsarma模型预测K-means聚类算法算法实现关键问题说明 4 部分核心代码5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于大数据的股票量化分析与股价预测系统 该项目较为新颖…

GMP原理与调度

GMP原理和调度 1.Golang"调度器"的由来1.1单进程时代不需要调度器1.2多进程/线程时代有了调度器需求1.3协程来提高cpu利用率 1.Golang"调度器"的由来 1.1单进程时代不需要调度器 早期的操作系统每个程序就是一个进程&#xff0c;直到一个程序运行完毕&am…

pandas由入门到精通-数据透视表

采集的数据存储后通常会分为多个文件或数据库,如何将这些文件按需拼接,或按键进行连接十分重要。这节将介绍数据索引的复杂操作如分层索引,stack,unstack,seet_index,reset_index等帮助重构数据,数据的拼接如merge,join,concat,combine_first等帮助连接数据,以及数据透视表…

1.7 【MySQL】常用存储引擎

MySQL 支持非常多种存储引擎&#xff0c;我这先列举一些&#xff1a; 存储引擎 描述 ARCHIVE 用于数据存档&#xff08;行被插入后不能再修改&#xff09; BLACKHOLE 丢弃写操作&#xff0c;读操作会返回空内容 CSV 在存储数据时&#xff0c;以逗号分隔各个数据项 FEDE…

微信小程序发布迭代版本后如何提示用户强制更新新版本

在点击小程序发布的时候选择&#xff0c;升级选项 之前用户使用过的再打开小程序页面就会弹出升级弹窗modal

深度学习9:简单理解生成对抗网络原理

目录 生成算法 生成对抗网络&#xff08;GAN&#xff09; “生成”部分 “对抗性”部分 GAN如何运作&#xff1f; 培训GAN的技巧&#xff1f; GAN代码示例 如何改善GAN&#xff1f; 结论 生成算法 您可以将生成算法分组到三个桶中的一个&#xff1a; 鉴于标签&#…

火山引擎 DataLeap:从短视频 APP 实践看如何统一数据指标口径

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 短视频正在成为越来越多人发现世界的窗口&#xff0c;其背后的创作者生态建设是各大短视频 APP 不可忽视的重要组成部分。 为了激励更多优质内容生产&#xff0c;某…

iOS 分别对一张图的局部进行磨砂,拼接起来不能贴合

效果图 需求&#xff0c;由于视图层级的原因&#xff0c;需要对图片分开进行磨砂&#xff0c; 然后组合在一起 如图&#xff0c;上下两部分&#xff0c;上下两个UIImageVIew大小相同&#xff0c;都是和图片同样的大小&#xff0c;只是上面的UIimageVIew 只展示上半部份 &#…

初识【类和对象】

目录 1.面向过程和面向对象初步认识 2.类的引入 3.类的定义 4.类的访问限定符及封装 5.类的作用域 6.类的实例化 7.类的对象大小的计算 8.类成员函数的this指针 1.面向过程和面向对象初步认识 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的…

stm32之9.中断优先级配置

主函数main.c #include <stm32f4xx.h> #include "led.h" #include "key.h"#define PAin(n) (*(volatile uint32_t *)(0x42000000 (GPIOA_BASE0x10-0x40000000)*32 (n)*4)) #define PEin(n) (*(volatile uint32_t *)(0x42000000 (GP…