Vuex的基本使用

文章目录

  • 一、Vuex概述
    • 1.是什么
    • 2.使用场景
    • 3.优势
    • 4.注意
  • 二、如何构建vuex多组件共享数据环境
    • 1.创建项目
    • 2.创建三个组件
    • 3.源代码
  • 三、vuex 的使用 - 创建仓库
    • 1.安装 vuex
    • 2.新建 `store/index.js` 专门存放 vuex
    • 3.创建仓库 `store/index.js`
    • 4 在 main.js 中导入挂载到 Vue 实例上
    • 5.测试打印Vuex
  • 四、核心概念 - state 状态
    • 1.目标
    • 2.提供数据
    • 3.使用数据
      • 3.1 通过 store 直接访问
      • 3.2 通过辅助函数 (简化)
  • 五、核心概念-mutations
    • 1.定义mutations
    • 2.格式说明
    • 3.组件中提交 mutations
    • 4. mutations 传参语法
    • 5. 辅助函数- mapMutations
  • 六、核心概念 - actions
    • 1.定义actions
    • 2.组件中通过dispatch调用
    • 3.辅助函数 -mapActions
  • 七、核心概念 - getters
    • 1.定义getters
    • 2.使用getters
      • 2.1原始方式-$store
      • 2.2辅助函数 - mapGetters
  • 八、核心概念 - module
    • 1.目标
    • 2.问题
    • 3.模块定义 - 准备 state
    • 4.获取模块内的state数据
      • 4.1.目标:
      • 4.2.使用模块中的数据
      • 4.3.代码示例
    • 5.获取模块内的getters数据
      • 5.1.目标:
      • 5.2.语法:
      • 5.3.代码演示
    • 6.获取模块内的mutations方法
      • 6.1.目标:
      • 6.2.注意:
      • 6.3.调用方式:
      • 6.4.代码实现
    • 7.获取模块内的actions方法
      • 7.1.目标:
      • 7.2.注意:
      • 7.3.调用语法:
      • 7.4.代码实现
    • 8.Vuex模块化的使用小结
      • 8.1.直接使用
      • 8.2.借助辅助方法使用

一、Vuex概述

官网:https://v3.vuex.vuejs.org/zh/

目标:明确 vuex 是什么,应用场景,优势

1.是什么

Vuex 是一个 Vue 的 状态管理工具,状态就是数据。

大白话:Vuex 是一个插件,可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如:购物车数据、个人信息数据

2.使用场景

①某个状态 在 很多个组件 来使用 (个人信息)

②多个组件 共同维护 一份数据 (购物车)

3.优势

①共同维护一份数据,数据集中化管理
响应式变化
③操作简洁 (vuex提供了一些辅助函数)
在这里插入图片描述

4.注意

官方原文:

  • 不是所有的场景都适用于vuex&#

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

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

相关文章

WPF+MVVM案例实战(二十一)- 制作一个侧边弹窗栏(CD类)

文章目录 1、案例效果1、侧边栏分类2、CD类侧边弹窗实现1、样式代码实现2、功能代码实现3 运行效果4、源代码获取1、案例效果 1、侧边栏分类 A类 :左侧弹出侧边栏B类 :右侧弹出侧边栏C类 :顶部弹出侧边栏D类 :底部弹出侧边栏2、CD类侧边弹窗实现 1、样式代码实现 在原有的…

揭开广告引擎的神秘面纱:如何在0.1秒内精准匹配用户需求?

目录 一、广告系统与广告引擎介绍 (一)广告系统与广告粗分 (二)广告引擎在广告系统中的重要性分析 二、广告引擎整体架构和工作过程 (一)一般概述 (二)核心功能架构图 三、标…

[论文阅读]A Survey of Embodied Learning for Object-Centric Robotic Manipulation

Abstract --以对象为中心的机器人操纵的Embodied learning是体现人工智能中一个快速发展且具有挑战性的领域。它对于推进下一代智能机器人至关重要,最近引起了人们的极大兴趣。与数据驱动的机器学习方法不同,具身学习侧重于通过与环境的物理交互和感知反…

NFTScan Site:以蓝标认证与高级项目管理功能赋能 NFT 项目

自 NFTScan Site 上线以来,它迅速成为 NFT 市场中的一支重要力量,凭借对各类 NFT 集合、市场以及 NFTfi 项目的认证获得了广泛认可。这个平台帮助许多项目提升了曝光度和可见性,为它们在竞争激烈的 NFT 市场中创造了更大的成功机会。 在最新更…

指数分布的原理和应用

本文介绍指数分布,及其推导原理。 Ref: 指数分布 开始之前,先看个概率密度函数的小问题: 问题描述:你于上午10点到达车站,车在10点到10:30 之间到达的时刻 X 的概率密度函数如图: 则使用分段积分&#xff0…

Javase——正则表达式

正则表达式的相关使用 public static void main(String[] args) {//校验QQ号 System.out.println("3602222222".matches("[1-9][0-9]{4,}"));// 校验18位身份证号 System.out.println("11050220240830901X".matches("^([0-9]){7,18}…

安装中文版 Matlab R2022a

下载安装包 压缩包有点大,大概20G 百度网盘:下载链接 提取码:rmja 安装 解压后打开目录,右键以管理员身份运行 setup.exe 选择输入安装秘钥 输入秘钥: 50874-33247-14209-37962-45495-25133-28159-33348-18070-6088…

SICTF Round #4|MISC

1.派森 腐乳昂木 奥普瑞特儿 阴坡尔特 艾克斯奥尔 腐乳昂木 提克有第爱慕 阴坡尔特 ⭐ 弗拉格 等于 布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉 印刻 等于 左中括号右中括号 佛儿 唉 因 梯软者左括号 零,楞左括号弗拉格右…

保研考研机试攻略:python笔记(2)

🐨🐨🐨宝子们好呀,今天我们继续来学习N诺提供的python笔记,fighting!( •̀ ω •́ )✧ 对这个系列感兴趣的宝子欢迎关注保研考研机试攻略专栏哦 ~ 目录 🐨🐨🐨4进制转…

Hyper-V 安装 KylinOS V10【图文教程】

文章目录 下载 KylinOSHyper-V 安装 KylinOS新建虚拟机配置虚拟机启动虚拟机并配置下载 KylinOS KylinOS 没有直接提供下载地址,需要在页面上点试用,填写个人信息后,才能看到下载地址。 https://www.kylinos.cn/support/trial.html?trial=425887 试用地址:产品试用申请国…

LeetCode 0685.冗余连接 II:并查集(和I有何不同分析)——详细题解(附图)

【LetMeFly】685.冗余连接 II:并查集(和I有何不同分析)——详细题解(附图) 力扣题目链接:https://leetcode.cn/problems/redundant-connection-ii/ 在本问题中,有根树指满足以下条件的 有向 图。该树只有一个根节点&…

mysql查表相关练习

作业要求: 单表练习: 1 . 查询出部门编号为 D2019060011 的所有员工 2 . 所有财务总监的姓名、编号和部门编号。 3 . 找出奖金高于工资的员工。 4 . 找出奖金高于工资 40% 的员工。 5 找出部门编号为 D2019090011 中所有财务总监,和…

GHuNeRF: Generalizable Human NeRF from a Monocular Video

研究背景 研究问题:这篇文章要解决的问题是学习一个从单目视频中泛化的人类NeRF模型。尽管现有的泛化人类NeRF已经取得了令人印象深刻的成果,但它们需要多视图图像或视频,这在某些情况下可能不可用。此外,一些基于单目视频的人类…

Linux - grep的正则用法

新建u.txt,文本内容如图: 搜寻特定字符串 利用中括号[]搜寻集合字符 行首与行位字符^$ 任意一个字符.与重复字符*限定连续RE字符范围{} 总结:

项目模块十五:HttpResponse模块

一、模块设计思路 存储HTTP应答要素&#xff0c;提供简单接口 二、成员变量 int _status; // 应答状态码 unordered_map<string, string> _headers; // 报头字段 string _body; // 应答正文 bool _redirect_flag; // 是否重定向信息 stri…

从零开始的c++之旅——继承

1. 继承 1.继承概念及定义 继承是面向对象编程的三大特点之一&#xff0c;它使得我们可以在原有类特性的基础之上&#xff0c;增加方法 和属性&#xff0c;这样产生的新的类&#xff0c;称为派生类。 继承 呈现了⾯向对象程序设计的层次结构&#xff0c;以前我们接触的…

6.1、实验一:静态路由

源文件获取&#xff1a;6.1_实验一&#xff1a;静态路由.pkt: https://url02.ctfile.com/f/61945102-1420248902-c5a99e?p2707 (访问密码: 2707) 一、目的 理解路由表的概念 会使用基础命令 根据需求正确配置静态路由 二、准备实验 1.实验要求 让PC0、PC1、PC2三台电脑…

logback日志级别动态切换四种方案

生产环境中经常有需要动态修改日志级别。 现在就介绍几种方案 方案一&#xff1a;开启logback的自动扫描更新 配置如下 <?xml version"1.0" encoding"UTF-8"?> <configuration scan"true" scanPeriod"60 seconds" debug…

Qt字符编码

目前字符编码有以下几种&#xff1a; 1、UTF-8 UTF-8编码是Unicode字符集的一种编码方式(CEF)&#xff0c;其特点是使用变长字节数(即变长码元序列、变宽码元序列)来编码。一般是1到4个字节&#xff0c;当然&#xff0c;也可以更长。 2、UTF-16 UTF-16是Unicode字符编码五层次…

postman 获取登录接口中的返回token并设置为环境变量的方法 postman script

postman是一个比较方便的API开发调试工具&#xff0c; 我们在访问API时一般都需要设置一个token来对服务进行认证&#xff0c; 这个token一般都是通过登录接口来获取。 这个postman脚本放到登录接口的sctipt--> post-response里面即可将登陆接口中返回的token值设置到postma…