从0开始搭建基于VUE的前端项目(三) Vuex的使用与配置

news2024/11/19 22:01:16

准备与版本

  1. vuex 3.6.2(https://v3.vuex.vuejs.org/zh/)

概念

  1. vuex是什么?
    是用作 【状态管理】的
    流程图如下在这里插入图片描述

  2. state 数据状态,成员是个对象
    mapState
    组件使用this.$store.state.xxx获取state里面的数据

  3. getters 成员是个函数,方便获取state里面的数据,也可以加工数据
    mapGetters
    组件使用this.$store.getters.xxx获取state里面的数据

  4. mutations 成员是个函数,修改state里面的数据
    mapMutations
    组件使用this.$store.commit(‘方法名称’), 提交要修改的数据

  5. actions 成员是个函数,修改state里面的数据,可写异步的方法
    mapActions
    组件使用this.$store.dispatch(‘方法名称’), 分发要修改的数据

  6. modules 成员是个对象,里面包含(state、getters、mutations、actions),由于业务比较复杂,可分模块管理状态,每个模块都有自己的state、getters、mutations、actions,特别注意的是 state是个函数
    在这里插入图片描述

安装

安装要指定版本,默认安装的4版本的

npm install vuex@3.6.2

代码实现

  1. 在src目录下创建以下
    store/index.js
    store/modules/
    在这里插入图片描述
    2) src/store/index.js代码
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
   
  state: {
   
    testCount: 

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

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

相关文章

HackTheBox-Mist

整体思路 端口扫描->Pluck CMS组件文件读取漏洞->文件上传获取shell->创建指向exe的快捷方式来提权-> 信息收集&端口利用 namp -sSVC 10.10.11.17目标只开放了80端口,将mist.htb加入到hosts文件后,访问mist.htb Pluck CMS文件读取 在…

RH850P1X芯片学习笔记-Clocked Serial Interface H (CSIH)

文章目录 Features of RH850/P1x-C CSIHUnitsRegister Base AddressClock SupplyInterrupt RequestsHardware ResetExternal Input/Output Signals数据一致性检查 OverviewFunctional OverviewFunctional Overview DescriptionBlock Diagram RegistersList of RegistersCSIHnCT…

Leetcode - 127双周赛

目录 一,3095. 或值至少 K 的最短子数组 I 二,3096. 得到更多分数的最少关卡数目 三,3097. 或值至少为 K 的最短子数组 II 四,3098. 求出所有子序列的能量和 一,3095. 或值至少 K 的最短子数组 I 本题需要知道一个知…

武汉星起航电子商务有限公司挂牌展示,为合作伙伴提供全方位支持

随着跨境电商领域市场竞争愈演愈烈,武汉星起航亚马逊一站式孵化平台悄然崭露头角。从2017年起,武汉星起航便立足亚马逊自营店铺,积累了丰富的实战运营经验。2020年正式成立后,公司以跨境电商为核心,凭借专业的运营团队…

复杂度的讲解

1.算法效率 如何衡量一个算法的好坏?从两个维度,时间和空间(算法运行的快慢,消耗的空间大不大)。因为计算机硬件领域的高速发展,如今计算机的存储量已经达到了一个很高的程度,所以现在我们一般…

12种常见的软件架构风格

什么是软件架构? 软件架构是定义软件系统的高级结构和组织的过程。它涉及识别和选择正确的组件,决定它们之间如何交互,以及确定它们应该如何组织以实现特定的目标。软件架构的目标是创建一个可维护、可扩展和安全的系统,能够满足…

车载电子电器架构 —— 软件下载

车载电子电器架构 —— 软件下载 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无…

【Qt】:常用控件(三:按钮类)

常用控件(三) 一.Push Button二.Radio Buttion三.Check Box 一.Push Button 使⽤ QPushButton 表⽰⼀个按钮.这也是当前我们最熟悉的⼀个控件了.QPushButton继承⾃QAbstractButton .这个类是⼀个抽象类.是其他按钮的⽗类. QAbstractButton 中,和 QPushBu…

基于java+SpringBoot+Vue的网上订餐系统设计与实现

基于javaSpringBootVue的网上订餐系统设计与实现 开发语言: Java 数据库: MySQL技术: Spring Boot JSP工具: IDEA/Eclipse、Navicat、Maven 系统展示 前台展示 菜品浏览与选择:用户可以浏览不同的菜品分类,并选择心仪的菜品。 订单创建与管理&…

做抖店的新手朋友!别再盲目跟风个人店了!开通完根本做不起来!

哈喽~我是电商月月 想做抖音小店的朋友们一定要分清个人店和个体店的区别 个人店铺的限制真的太多了!真的不好做! 一.首先我们要知道两种的区别 个人店不需要营业执照,身份证就能开启 个体店则需要办理营业执照【营业执照的办…

设计模式——建造者模式03

工厂模式注重直接生产一个对象,而建造者模式 注重一个复杂对象是如何组成的(过程),在生产每个组件时,满足单一原则,实现了业务拆分。 设计模式,一定要敲代码理解 组件抽象 public interface …

算法设计与分析实验报告c++实现(排序算法、三壶谜题、交替放置的碟子、带锁的门)

一、实验目的 1.加深学生对分治法算法设计方法的基本思想、基本步骤、基本方法的理解与掌握; 2.提高学生利用课堂所学知识解决实际问题的能力; 3.提高学生综合应用所学知识解决实际问题的能力。 二、实验任务 1、 编…

JDI LCD 驱动时序介绍

1. 引言 绝大多数 STM32 MCU 都可应用于图形界面,而且很多系列还内置图形硬件 LTDC,支持驱动 RGB 接口的 LCD。但是存在少数类型的 LCD,如 JDI 屏,除了 STM32L4P5 支持外,其它 MCU 只能根据屏的接口时序要求&#xff…

DNS和HTTP

DNS应用层协议 域名解析系统 使用IP地址,来描述设备在网络上的位置 IP地址并不适合来进行传播网站,就采用了域名的方式来解决网站传播的问题。如www.baidu.com这样类似的就很容易让人记住。其域名就直接代表了这个网站。而且有一套自动的系统会将域名解…

LeetCode 2192.有向无环图中一个节点的所有祖先:拓扑排序

【LetMeFly】2192.有向无环图中一个节点的所有祖先:拓扑排序 力扣题目链接:https://leetcode.cn/problems/all-ancestors-of-a-node-in-a-directed-acyclic-graph/ 给你一个正整数 n ,它表示一个 有向无环图 中节点的数目,节点编…

AFCI 应用笔记二之数据采集

1. 简介 基于监督学习的神经网络算法需要大量数据作为输入,模型完全由数据驱动,其数据质量是算法有效的必要条件,所以如何高效的采集到数据,以及正确的标注或分析是极其重要的,如果第一步有问题,后续的所有…

如何删除 iPhone 上的 iCloud 激活锁

Apple 在 iPhone 上通过不同的安全屏障来保护您的数据。 iCloud 激活锁可阻止外部人员访问您的手机。您可以通过打开“查找我的 iPhone”功能来激活此锁。 使用安全协议似乎是无害的,直到你到达门的另一边。如果您购买了带有激活锁的二手 iPhone 或忘记了 iCloud 凭…

eBay买家号注册下单容易死号?是什么原因导致?

随着电子商务的迅猛发展,跨境电商平台eBay日益成为众多消费者和商家的首选。然而,自去年下半年以来,eBay推出的新规则给买家号的注册带来了前所未有的挑战。许多新用户反映,在注册eBay买家号后,往往遭遇刚注册就被冻结…

哈希表2s总结

3.哈希表 哈希表非常常用,字典一般会用来保存处理过后的输入输出信息,集合也可以用来去重,这部分是重点,但是还是那句话,这种题目是不会或者说很少考原题的,主要还是学习知识,所以题目看一下答…

JS详解-手写Promise!!!

前言: 针对js的深入理解,作者学习并撰写以下文章,由于理解认知有限难免存在偏差,请大家指正!所有定义来自mdn。 Promise介绍: 对象表示异步操作最终的完成(或失败)以及其结果值. 描…