从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: 

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

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

相关文章

LC 106.从中序与后序遍历序列构造二叉树

106. 从中序与后序遍历序列构造二叉树 给定两个整数数组 inorder 和 postorder ,其中 inorder 是二叉树的中序遍历, postorder 是同一棵树的后序遍历,请你构造并返回这颗 二叉树 。 示例 1: 输入: inorder [9,3,15,20,7], post…

突破编程_C++_网络编程(OSI 七层模型(物理层与数据链路层))

1 OSI 七层模型概述 OSI(Open Systems Interconnection)七层模型,即开放系统互联参考模型,起源于 20 世纪 70 年代和 80 年代。随着计算机网络技术的快速发展和普及,不同厂商生产的计算机和网络设备之间的互操作性成为…

个人主页导航源码

源码简介 个人主页导航源码,个人主页导航源码,一款带后台的个人导航主页源码。 搭建环境 PHP 5.2 Nginx Mysql5.6 安装教程 1.上传源码压缩包到网站目录并解压 2.访问网站域名安装提示进行安装即可 后台路径为:https://域名/admin/ …

ngrok 内网穿透使用

title: ngrok 内网穿透使用 search: 2024-02-29 文章目录 背景Windows安装ngrok指令授权ngrok个人用户Authtoken穿透 http 或 https 服务ngrok的代理http指令ngrok获得静态域名指令ngrok的代理ssh指令 背景 这次寒假回家,很无奈,很多东西放在项目组服务…

3月份 月总结

抓住3月份的尾巴,简单写一篇月度总结。 3月份之所以产出比较少,是因为时间都花在学习和工作上了。 学习的内容包括但不限于 开源Grbl_Esp32 gcode学习 web串口 svg转gcode的生成 字体转svg 位图转矢量图 potrace算法 扫描线相关知识 矢量图编辑器调研 …

Vue2(十一):脚手架配置代理、github案例、插槽

一、脚手架配置代理 1.回顾常用的ajax发送方式: (1)xhr 比较麻烦,不常用 (2)jQuery 核心是封装dom操作,所以也不常用 (3)axios 优势:体积小、是promis…

微软Azure推出9种逼真AI语音服务;OpenAI有限开放Voice Engine访问权限

🚀 微软Azure推出9种逼真AI语音服务 摘要:微软Azure团队在2023年9月对外宣布,针对商业客户推出了一系列逼真的AI语音服务。最近,该公司进一步表示,这些服务现已包含9种更为真实的人工智能声音,并且已于所有…

PostgreSQL:所有支持的数据类型及建表语句实例

哈喽,大家好,我是木头左! 一、引言 在当今这个数据驱动的时代,数据库已经成为了企业和个人不可或缺的工具。而在众多数据库产品中,PostgreSQL以其强大的功能和高度的可扩展性,受到了越来越多开发者的青睐。…

ZC706+AD9361 运行 open WiFi

先到github上下载img,网页链接如下: https://github.com/open-sdr/openwifi?tabreadme-ov-file 用win32 Disk lmager 把文件写入到SD卡中,这一步操作会把SD卡重新清空,注意保存数据。这个软件我会放在最后的网盘链接中 打开linu…

对接中泰极速行情 | DolphinDB XTP 插件使用教程

XTP 是中泰证券推出的高性能交易平台,专为专业投资者提供高速行情及交易系统,旨在提供优质便捷的市场接入通道。目前支持股票、基金、ETF、债券、期权等多个市场,可满足不同投资者需求。 基于 XTP 官方 C SDK,DolphinDB 开发了 X…

【PyTorch Tensor】PyTorch Tensor编程教学:基础与实战

PyTorch是一个开源的机器学习库,它提供了强大的张量计算(Tensor computation)能力和动态计算图(Dynamic computation graph),使得深度学习模型的构建和训练变得更加灵活和直观。在本文中,我们将…

rabbitmq消息处理模式

在 RabbitMQ 中,消费者的消息处理模式可以分为两种:pull 模式和 push 模式⁵。 Pull 模式:消费者主动从消息中间件中拉取消息。这种模式下,每次接收消息都需要拉取一下队列的信息,由于是拉取的,实用性较差&…

使用hping3网络工具构造TCP/IP数据包和进行DDos攻击

1 概述 hping3是一个强大的命令行工具,用于生成、发送和解析TCP/IP协议的数据包。它是开源的网络安全工具,由Salvatore Sanfilippo开发,主要应用于网络审计、安全测试和故障排查等领域。hping3不仅可以作为普通的网络连通性检测工具&#xf…

【蓝桥杯第十三届省赛B】(部分详解)

九进制转十进制 #include <iostream> #include<math.h> using namespace std; int main() {cout << 2*pow(9,3)0*pow(9,2)2*pow(9,1)2*pow(9,0) << endl;return 0; }顺子日期 #include <iostream> using namespace std; int main() {// 请在此…

ROS2从入门到精通1-2:详解ROS2服务通信机制与自定义服务

目录 0 专栏介绍1 服务通信模型2 服务模型实现(C)3 服务模型实现(Python)4 自定义服务5 话题、服务通信的异同 0 专栏介绍 本专栏旨在通过对ROS2的系统学习&#xff0c;掌握ROS2底层基本分布式原理&#xff0c;并具有机器人建模和应用ROS2进行实际项目的开发和调试的工程能力。…

智慧公厕是什么?智慧公厕的主要功能、特点?

智慧公厕&#xff0c;顾名思义&#xff0c;是指应用了智能科技的公共厕所&#xff0c;旨在提供更加便捷、舒适、智能化的卫生服务。相比传统的公厕&#xff0c;智慧公厕不仅拥有更加智能化的设备&#xff0c;还配备了远程监控与管理系统&#xff0c;以及节能环保技术&#xff0…

如何选择优质的外贸网站建设公司?

在当今数字化时代&#xff0c;外贸行业越来越重视在线渠道的发展&#xff0c;而外贸网站建设作为企业对外联系的重要窗口&#xff0c;扮演着至关重要的角色。选择一家优质的外贸网站建设公司&#xff0c;不仅能帮助企业提升品牌形象&#xff0c;还能有效扩大海外市场。那么&…

微信小程序【从入门到精通】——服务器的数据交互

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

OpenCV中的模块:三维显示-VIZ

曾经基于PCL 做过不少点云相关的开发,其中借助VTK进行点云显示。后来基于OpenCV进行三维重建,遇到了点云显示的问题。当时采取的方法是将点云保存下来,然后借助CloudCompare等查看效果。如果能够将VIZ编译进来,预计会提升开发速度。本文章将简要介绍其中Ubuntu和windows下的…

【实战教程】Spring Boot项目集成华为openGauss数据库的关键步骤与注意事项

引言&#xff1a; 随着国产数据库技术的崛起&#xff0c;华为openGauss凭借其高性能、安全可靠及易用性成为了众多开发者的首选方案。本篇技术文章将聚焦于如何在Spring Boot项目中成功集成华为openGauss数据库&#xff0c;并揭示其中的一些关键步骤与注意事项&#xff0c;助您…