Vuex 使用实例
文章目录
- Vuex
- 介绍
- 使用步骤
- 安装
- 使用
- 定义配置文件
- 代码解释:
- 导入到 App.vue使用
- 使用vuex
Vuex
介绍



简单来说就是,多个组件需要共享一个data,原本只能通过父子组件来进行,但是vuex可以实现共享data
使用步骤
安装

npm install vuex@next
查看我们的 pakege.json 可以发现安装是否成功


已经安装成功
使用
定义配置文件
在项目的 src 目录下创建一个 store 文件夹,并在其中创建一个 index.js 或 index.ts 文件来定义 Vuex store

加入配置代码
// src/store/index.js
import { createStore } from 'vuex'; export default createStore({ state: { count: 0, user: { name: 'John Doe', age: 30 } }, mutations: { increment(state) { state.count++; }, updateUserName(state, newName) { state.user.name = newName; } }, actions: { asyncIncrement({ commit }) { setTimeout(() => { commit('increment'); }, 1000); }, updateUserNameAction({ commit }, newName) { commit('updateUserName', newName); } }, getters: { doubleCount(state) { return state.count * 2; }, userAge(state) { return state.user.age; } }
});
代码解释:
state(状态)
含义:state 是 Vuex 中的基本数据,用于存储应用程序的状态变量。它是响应式的,当 state 发生变化时,依赖这些状态的组件会自动更新。
作用:state 提供了应用程序中所有组件可以共享的数据源。通过将状态集中存储在 state 中,可以方便地管理应用的全局状态。
mutations(突变)
含义:mutations 是 Vuex 中唯一允许更新应用状态的方法。它们是同步函数,用于对 state 进行同步修改。
作用:mutations 提供了修改 state 的机制。每个 mutation 都有一个字符串类型的事件类型(type)和一个回调函数(handler),在回调函数中实际进行状态的改变。通过调用 commit 方法并传入 mutation 的类型来触发相应的 mutation。
actions(动作)
含义:actions 类似于 mutations,但用于处理异步操作。actions 可以包含任意异步代码,并在操作完成后通过调用 mutations 来更新状态。
作用:actions 提供了处理异步操作(如 API 请求)的能力。它们可以触发 mutations,但不能直接修改 state。通过调用 dispatch 方法并传入 action 的类型来触发相应的 action。
getters(获取器)
含义:getters 是 Vuex 中用于从 state 中派生出一些状态或计算属性的函数。它们类似于 Vue 组件中的计算属性,但可以在全局范围内使用。
作用:getters 提供了对 state 的计算或过滤功能,从而可以基于 state 派生出新的状态或数据。getters 可以接受额外的参数,并返回派生出的新状态或数据。在组件中,可以通过 this.$store.getters.getterName 或 mapGetters 辅助函数来访问 getters。
导入到 App.vue使用
import store from './store'
app.use(store);
使用vuex
现在,可以在 Vue 组件中使用 Vuex 状态、提交 mutations 和调用 actions
实例代码:
<template> <div> <p>Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <p>User Name: {{ userName }}</p> <p>User Age: {{ userAge }}</p> <button @click="incrementCount">Increment</button> <button @click="asyncIncrementCount">Async Increment</button> <button @click="updateUserName('Jane Doe')">Update User Name</button> </div>
</template> <script>
import { computed } from 'vue';
import { useStore } from 'vuex'; export default { setup() { const store = useStore(); const count = computed(() => store.state.count); const doubleCount = computed(() => store.getters.doubleCount); const userName = computed(() => store.state.user.name); const userAge = computed(() => store.getters.userAge); const incrementCount = () => { store.commit('increment'); }; const asyncIncrementCount = async () => { await store.dispatch('asyncIncrement'); }; const updateUserName = (newName) => { store.dispatch('updateUserNameAction', newName); }; return { count, doubleCount, userName, userAge, incrementCount, asyncIncrementCount, updateUserName }; }
};
</script>


然后就能成功的实现vuex数据共享了
相关文章:
Vuex 使用实例
文章目录 Vuex介绍使用步骤安装使用定义配置文件代码解释: 导入到 App.vue使用使用vuex Vuex 介绍 简单来说就是,多个组件需要共享一个data,原本只能通过父子组件来进行,但是vuex可以实现共享data 使用步骤 安装 npm install v…...
深度分离卷积
深度可分离卷积(Depthwise Separable Convolution)是一种高效的卷积操作,它将传统卷积操作分解为两个独立的步骤:深度卷积(Depthwise Convolution) 和 逐点卷积(Pointwise Convolutionÿ…...
JSONL 文件的检查和修订器
下面是一个JSONL 文件的检查和修订器,代码如下: import json import tkinter as tk from tkinter import filedialog, messageboxdef check_jsonl_file(input_file, log_file, output_file=None):errors = []valid_lines = []with open(input_file, r, encoding=utf-8) as in…...
输电线路悬垂线夹检测无人机航拍图像数据集,总共1600左右图片,悬垂线夹识别,标注为voc格式
输电线路悬垂线夹检测无人机航拍图像数据集,总共1600左右图片,悬垂线夹识别,标注为voc格式 输电线路悬垂线夹检测无人机航拍图像数据集介绍 数据集名称 输电线路悬垂线夹检测数据集 (Transmission Line Fittings Detection Dataset) 数据集…...
杭电合集小tips
刷HDU的题过程中,有一些值得注意的小问题,这里我踩坑之后记录下来,以便回顾与各位分享 一,关于语言的使用 主要大家还是用C和C多,但是注意的是,#include<bits/stdc.h>这个文件是G自带的,…...
Python的输入输出函数
1.输入函数 Python的输入函数是input().input的引号里面是提示的内容,从键盘输入的任何字符都会当成字符串赋值给变量. n input("请输入:") print(type(n)) print(n) 输出结果为: 请输入:33 <class str> 33 2.输出函数 Python的内置…...
如何进行搭建与部署云主机?
云主机是一种基于虚拟化技术的服务器,云主机可以为用户提供一种非常高效且可扩展的计算机资源服务,主要是由操作系统和云硬盘等基础的计算组件所构成的,用户能够根据自身的需求来选择相关的配置规格,来满足不同的业务需求。 那么我…...
Biomamba求职| 国奖+4篇一作SCI
转眼间我也要参加秋招啦,认真的求职帖,各位老师/老板欢迎联系~其它需要求职的小伙伴也欢迎把简历发给我们,大家一起找工作。 一、基本信息 姓名:Biomamba 性别:男 出厂年份:1998 籍贯:浙江…...
Python 工具库每日推荐 【Pandas】
文章目录 引言Python数据处理库的重要性今日推荐:Pandas工具库主要功能:使用场景:安装与配置快速上手示例代码代码解释实际应用案例案例:销售数据分析案例分析高级特性数据合并和连接时间序列处理数据透视表扩展阅读与资源优缺点分析优点:缺点:总结【 已更新完 TypeScrip…...
电影选票选座系统|影院购票|电影院订票选座小程序|基于微信小程序的电影院购票系统设计与实现(源码+数据库+文档)
电影院订票选座小程序 目录 基于微信小程序的电影院购票系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、用户功能实现 2、管理员功能实现 (1)影院信息管理 (2)电影信息管理 (3)已完成…...
matlab初学习记录
文章目录 内置函数与变量matlab 编辑器数组等间距向量数组函数数组索引提取多个元素 对向量执行数组计算查看文档 画图添加注释 实践导入数据关系运算符分支恒星运动 matlab 学习看入门之旅 先计算等号右边再计算等号左边。 工作区记录等号右边的变量。 ; 表示的是抑制输出。…...
protobuf之Message
简介 Message是protobuf的消息抽象类,是其它通过protoc生成的自定义消息的基类 结构 #mermaid-svg-u5iAZNpfIH5hQrlP {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-u5iAZNpfIH5hQrlP .error-icon{fil…...
【redis-06】redis的stream流实现消息中间件
redis系列整体栏目 内容链接地址【一】redis基本数据类型和使用场景https://zhenghuisheng.blog.csdn.net/article/details/142406325【二】redis的持久化机制和原理https://zhenghuisheng.blog.csdn.net/article/details/142441756【三】redis缓存穿透、缓存击穿、缓存雪崩htt…...
二、MySQL的数据目录
文章目录 1. MySQL8的主要目录结构1.1 数据库文件的存放路径1.2 相关命令目录1.3 配置文件目录 2. 数据库和文件系统的关系2.1 查看默认数据库2.2 数据库在文件系统中的表示2.3 表在文件系统中的表示2.3.1 InnoDB存储引擎模式2.3.2 MyISAM存储引擎模式 2.4 小结 1. MySQL8的主要…...
2024.10月7~10日 进一步完善《电信资费管理系统》
一、新增的模块: 在原项目基础上,新增加了以下功能: 1、增加AspectJ 框架的AOP 异常记录和事务管理模块。 2、增加SpringMVC的拦截器,实现登录 控制页面访问权限。 3、增加 Logback日志框架,记录日志。 4、增加动态验…...
vue2项目的路由使用history模式,刷新会导致页面404的问题
在vue2项目中,如果我们使用的路由是history模式,刷新会导致页面404,解决方法很简单,在vue.config.js文件中的devServer下增加historyApiFallback: true; 代码如下: module.exports {devServer: {historyApiFallback: true,} }...
pytest框架之fixture测试夹具详解
前言 大家下午好呀,今天呢来和大家唠唠pytest中的fixtures夹具的详解,废话就不多说了咱们直接进入主题哈。 一、fixture的优势 pytest框架的fixture测试夹具就相当于unittest框架的setup、teardown,但相对之下它的功能更加强大和灵活。 …...
【浏览器】如何正确使用Microsoft Edge
1、清理主页广告 如今的Microsoft Edge 浏览器 主页太乱了,各种广告推送,点右上角⚙️设置,把快速链接、网站导航、信息提要、背景等全部关闭。这样你就能得到一个超级清爽的主页。 网站导航 关闭 …...
打印1000年到2000年之间的闰年
我们要打印1000年到2000年之间的闰年,首先我们先输出1000年到2000年之间的所有的年份,同时我们将闰年的判断方法输入到其中 闰年需要满足下列两个条件的其中之一: 1.能被4整除但不能被100整除 2.能被400整除 打印1000年到2000年之间的闰年…...
nn.Identity()
在 PyTorch 中,nn.Identity()是一个简单的模块,它的作用是在模型中作为一个占位符或者不进行任何操作的层,直接返回输入。 一、使用方法 以下是一个简单的使用示例: import torch import torch.nn as nn# 创建一个 Identity 层…...
XCTF-web-easyupload
试了试php,php7,pht,phtml等,都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接,得到flag...
TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...
边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中,UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
大家好,我是java1234_小锋老师,看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】,分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...
宇树科技,改名了!
提到国内具身智能和机器人领域的代表企业,那宇树科技(Unitree)必须名列其榜。 最近,宇树科技的一项新变动消息在业界引发了不少关注和讨论,即: 宇树向其合作伙伴发布了一封公司名称变更函称,因…...
