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

准备与版本

  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: 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HarmonyOS 应用开发之组件启动规则(Stage模型)

启动组件是指一切启动或连接应用组件的行为: 启动UIAbility、ServiceExtensionAbility、DataShareExtensionAbility,如使用startAbility()、startServiceExtensionAbility()、startAbilityByCall()等相关接口。 连接ServiceExtensionAbility、DataShare…

[BT]BUUCTF刷题第12天(3.31)

第12天 Basic BUU BURP COURSE 1 经过尝试,在这里X-Forwarded-For不管用,要用X-Real-IP BP抓包添加X-Real-IP:127.0.0.1(注意这一行前面不要有空行) 发送后返回提示了用户名和密码,这里直接给了,登录即可…

unity学习(78)--unity调试--长痛不如短痛

1.在vs2022中,工具--获取工具与功能。 2. 安装图中工具,原来我早就安装了。 3 f9下断 同时点击图中按钮 vs此时变为如下状态 unity中出现如下提示: 4 在unity中运行游戏,vs这边确实成功断住了!

【千帆杯】K12教育常规赛 北京场线下交流会心得

千帆杯K12教育常规赛 北京场线下交流会心得 ​ 周日有幸参加了 百度智能云千帆AppBuilder北京场线下交流会 ( 活动链接 ),去线下组队创作了 K12教育 相关的智能体。参赛过程中认识了不少大佬与朋友,抱大佬队友的腿,他的 猜成语 应用获得了线…

【详细讲解WebView的使用与后退键处理】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出…

前端三剑客 —— CSS (第二节)

目录 内容回顾: CSS选择器*** 属性选择器 伪类选择器 1):link 超链接点击之前 2):visited 超链接点击之后 3):hover 鼠标悬停在某个标签上时 4):active 鼠标点击某个标签时,但没有松开 5):fo…

TypeScript-自动编译

1.生成文件 tsc --init 2.修改配置文件 说明:通过CTRLF搜索到以下单词,进行修改。 "strict": true, //是否开启严格模式 "outDir": "./outFile", //表示ts文件最终编译为js文件,js文件存放的位置 3.新…

JavaScript异步编程规范->实现一个简易版本的 Promise

文章目录 1.Promise基本使用2.实现一个Promise2.1.resolve/reject2.1.1.初始化状态及返回值2.1.2.实现resolve/reject2.1.3.状态不可逆2.1.4.处理throw 2.2.then2.2.1.实现then2.2.2.通过队列实现setTimeout2.2.3.链式调用2.2.4.执行顺序 2.3.其他方法2.3.1.all2.3.2.race2.3.3…

量化交易入门(三十四)DMI指标学习和应用

什么是DMI指标 DMI(Dynamic Momentum Index)指标是一种趋势型指标,由威尔斯威尔德(Welles Wilder)于1978年提出。它通过比较价格的正向和负向变动幅度来衡量市场趋势的强度和方向。 DMI指标由三部分组成: DI(Positive Directional Indicator):衡量价格上涨趋势的强度。-DI(N…

域攻防渗透之委派攻击

出身寒微,不是耻辱,能屈能伸,方为丈夫。 约束性委派的利用 原理 非约束性委派被委派的机器会直接得到发布委派的用户的TGT,是十分不安全的,因此微软推出了约束性委派,还扩充kerberos协议,添加…

适用于 Linux 的 Windows 子系统安装初体验

1、简述 Windows Subsystem for Linux (WSL) 是 Windows 的一项功能,允许您在 Windows 计算机上运行 Linux 环境,而无需单独的虚拟机或双重启动。 WSL 旨在为想要同时使用 Windows 和 Linux 的开发人员提供无缝且高效的体验。 使用 WSL 安装和运行各种 L…

PWM波输出-定时器输出比较单元

目录 1,前言 2,实现过程 2.1 比较部分 2.2 输出部分 1,前言 电平,作为单片机的“肌肉”,承担着实践单片机的“想法“的重要任务。而PWM波,则是电平这个大类的重中之重,可以说,没…

代码随想录Day24:回溯算法Part1

回溯算法理论: Leetcode 77. 组合 这道题其实有点绕的我头晕,对于start index的解释我能够理解,但是我很难去想清楚他是如何在一次次递归中变化的因为他在for循环外面扮演我们每一次在一个数字找完了他开头的所有组合之后,就把st…

题目:图书排序(蓝桥OJ 4397)

问题描述&#xff1a; 解题思路&#xff1a; 可以使用结构体数组并排序&#xff0c;需要注意的是结构体数组不能直接使用sort进行排序,要自己写cmp函数。 结构体的cmp具体写法&#xff1a; bool cmp(book a, book b) { // 结构体类型名做参数if (a.w b.w) return a.id <…

短剧猫H5页面html源码

短剧猫H5页面html源码&#xff0c;包含一个接口&#xff0c;像俩天块样式发送剧名回复网盘链接&#xff0c;文件上传解压就能用。 源码免费下载地址抄笔记 (chaobiji.cn)https://chaobiji.cn/

53 v-bind 和 v-model 的实现和区别

前言 这个主要的来源是 偶尔的情况下 出现的问题 就比如是 el-select 中选择组件之后, 视图不回显, 然后 model 不更新等等 这个 其实就是 vue 中 视图 -> 模型 的数据同步, 我们通常意义上的处理一般是通过 模型 -> 数据 的数据同步, 比如 我们代码里面更新了 model.…

进程、线程、协程

进程、线程、协程 进程、线程、协程进程概念生命周期进程的五状态模型进程同步机制进程通信机制死锁进程调度算法 线程概念生命周期线程同步机制互斥锁信号量条件变量读写锁 线程通信机制线程死锁 协程进程、线程、协程对比进程与线程比较协程与线程比较 如何选择进程、线程、协…

【Vue3】el-checkbox-group实现权限配置和应用

一. 需求 针对不同等级的用户&#xff0c;配置不同的可见项 配置效果如下 &#xff08;1&#xff09;新增&#xff0c;获取数据列表 &#xff08;2&#xff09;编辑&#xff0c;回显数据列表 应用效果如下 &#xff08;1&#xff09;父级配置 &#xff08;2&#xff09;子级…

【Selenium+python】自动化测试登录界面

前言&#xff1a;已经学习selenium许久了&#xff0c;奈何公司的项目还在码代码中...&#xff0c;感觉自己学的东西快忘的差不多了&#xff0c;所以就找个网站练练手&#xff0c;顺便回顾一下UI自动化的知识&#xff0c;也希望跟我一样的小白有所受益。 一、用例分析&#xff…

Benjamin Button‘sLetter to Daughter 英语阅读

Benjamin ButtonsLetter to Daughter 来源: The Curious Case of Benjamin Button 官方翻译 For what its worth: Its never too late, or in my case, too early to bewhoever you want to be. Theres no time limit. Start whenever you want. You can change or stay t…