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

个人主页导航源码

源码简介 个人主页导航源码,个人主页导航源码,一款带后台的个人导航主页源码。 搭建环境 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指令 背景 这次寒假回家,很无奈,很多东西放在项目组服务…

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…

使用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…

linux C:变量、运算符

linux C 文章目录 变量运算符 一、变量 [存储类型] 数据类型 标识符 值 标识符&#xff1a;由数字、字母、下划线组成的序列&#xff0c;不能以数字开头。 数据类型&#xff1a;基本数据类型构造类型 存储类型&#xff1a;auto static…

Linux(CentOS7)配置系统服务以及开机自启动

目录 前言 两种方式 /etc/systemd/system/ 进入 /etc/systemd/system/ 文件夹 创建 nginx.service 文件 重新加载 systemd 配置文件 ​编辑 配置开机自启 /etc/init.d/ 进入 /etc/init.d/ 文件夹 创建 mysql 文件 编写脚本内容 添加/删除系统服务 配置开机自启 …

【MySQL笔记】SELECT COUNT(*) 的时候,加不加where条件有差别吗?

文章目录 前言实验结论 前言 这部分很多帖子都只在问题里罗列下&#xff0c;好像也没详细解答 其实就是跟InnoDB优先走二级索引的优化有关&#xff0c;前面也提到了”优化的前提是查询语句中不包含where条件和group by条件“ 还不太了解这个优化的朋友可以看上一篇帖子 实验 …

编曲知识13:弦乐技法应用 合成器应用 声场摆位

弦乐技法 技法分类 Sustain(长音)类: Legato、Port、Gliss、Tremolo、Trills Staccato(短音)类: Staccato、Pizzicato、Spiccato Legato:连奏 Port:滑音 Gliss:慢速滑音 Tremolo:震音 Trills:颤音 Staccato:顿弓 Pizzicato:拨奏 Spiccato:跳弓 长音类技法 主…

从0到1:兼职招聘小程序开发笔记(一)

可行性分析 兼职招聘小程序&#xff1a;为雇主和求职者提供便利的平台&#xff0c;旨在帮助雇主招聘兼职员工&#xff0c;并让求职者寻找合适的兼职工作。提供简单、快捷的方式来匹配兼职岗位和候选人&#xff0c;节省了招聘和求职的时间和精力。其主要功能模块包括&#xff1…

C练习题(1)

变种水仙花&#xff08;来自牛课网&#xff09; 题目 变种水仙花数 - Lily Number&#xff1a;把任意的数字&#xff0c;从中间拆分成两个数字&#xff0c;比如1461 可以拆分成&#xff08;1和461&#xff09;,&#xff08;14和61&#xff09;,&#xff08;146和1),如果所有拆…