当前位置: 首页 > news >正文

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介绍使用步骤安装使用定义配置文件代码解释&#xff1a; 导入到 App.vue使用使用vuex Vuex 介绍 简单来说就是&#xff0c;多个组件需要共享一个data&#xff0c;原本只能通过父子组件来进行&#xff0c;但是vuex可以实现共享data 使用步骤 安装 npm install v…...

深度分离卷积

深度可分离卷积&#xff08;Depthwise Separable Convolution&#xff09;是一种高效的卷积操作&#xff0c;它将传统卷积操作分解为两个独立的步骤&#xff1a;深度卷积&#xff08;Depthwise Convolution&#xff09; 和 逐点卷积&#xff08;Pointwise Convolution&#xff…...

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格式

输电线路悬垂线夹检测无人机航拍图像数据集&#xff0c;总共1600左右图片&#xff0c;悬垂线夹识别&#xff0c;标注为voc格式 输电线路悬垂线夹检测无人机航拍图像数据集介绍 数据集名称 输电线路悬垂线夹检测数据集 (Transmission Line Fittings Detection Dataset) 数据集…...

杭电合集小tips

刷HDU的题过程中&#xff0c;有一些值得注意的小问题&#xff0c;这里我踩坑之后记录下来&#xff0c;以便回顾与各位分享 一&#xff0c;关于语言的使用 主要大家还是用C和C多&#xff0c;但是注意的是&#xff0c;#include<bits/stdc.h>这个文件是G自带的&#xff0c…...

Python的输入输出函数

1.输入函数 Python的输入函数是input().input的引号里面是提示的内容&#xff0c;从键盘输入的任何字符都会当成字符串赋值给变量. n input("请输入:") print(type(n)) print(n) 输出结果为&#xff1a; 请输入:33 <class str> 33 2.输出函数 Python的内置…...

如何进行搭建与部署云主机?

云主机是一种基于虚拟化技术的服务器&#xff0c;云主机可以为用户提供一种非常高效且可扩展的计算机资源服务&#xff0c;主要是由操作系统和云硬盘等基础的计算组件所构成的&#xff0c;用户能够根据自身的需求来选择相关的配置规格&#xff0c;来满足不同的业务需求。 那么我…...

Biomamba求职| 国奖+4篇一作SCI

转眼间我也要参加秋招啦&#xff0c;认真的求职帖&#xff0c;各位老师/老板欢迎联系~其它需要求职的小伙伴也欢迎把简历发给我们&#xff0c;大家一起找工作。 一、基本信息 姓名&#xff1a;Biomamba 性别&#xff1a;男 出厂年份&#xff1a;1998 籍贯&#xff1a;浙江…...

Python 工具库每日推荐 【Pandas】

文章目录 引言Python数据处理库的重要性今日推荐:Pandas工具库主要功能:使用场景:安装与配置快速上手示例代码代码解释实际应用案例案例:销售数据分析案例分析高级特性数据合并和连接时间序列处理数据透视表扩展阅读与资源优缺点分析优点:缺点:总结【 已更新完 TypeScrip…...

电影选票选座系统|影院购票|电影院订票选座小程序|基于微信小程序的电影院购票系统设计与实现(源码+数据库+文档)

电影院订票选座小程序 目录 基于微信小程序的电影院购票系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、用户功能实现 2、管理员功能实现 &#xff08;1&#xff09;影院信息管理 &#xff08;2&#xff09;电影信息管理 &#xff08;3&#xff09;已完成…...

matlab初学习记录

文章目录 内置函数与变量matlab 编辑器数组等间距向量数组函数数组索引提取多个元素 对向量执行数组计算查看文档 画图添加注释 实践导入数据关系运算符分支恒星运动 matlab 学习看入门之旅 先计算等号右边再计算等号左边。 工作区记录等号右边的变量。 ; 表示的是抑制输出。…...

protobuf之Message

简介 Message是protobuf的消息抽象类&#xff0c;是其它通过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日 进一步完善《电信资费管理系统》

一、新增的模块&#xff1a; 在原项目基础上&#xff0c;新增加了以下功能&#xff1a; 1、增加AspectJ 框架的AOP 异常记录和事务管理模块。 2、增加SpringMVC的拦截器&#xff0c;实现登录 控制页面访问权限。 3、增加 Logback日志框架&#xff0c;记录日志。 4、增加动态验…...

vue2项目的路由使用history模式,刷新会导致页面404的问题

在vue2项目中&#xff0c;如果我们使用的路由是history模式&#xff0c;刷新会导致页面404&#xff0c;解决方法很简单&#xff0c;在vue.config.js文件中的devServer下增加historyApiFallback: true; 代码如下: module.exports {devServer: {historyApiFallback: true,} }...

pytest框架之fixture测试夹具详解

前言 大家下午好呀&#xff0c;今天呢来和大家唠唠pytest中的fixtures夹具的详解&#xff0c;废话就不多说了咱们直接进入主题哈。 一、fixture的优势 ​ pytest框架的fixture测试夹具就相当于unittest框架的setup、teardown&#xff0c;但相对之下它的功能更加强大和灵活。 …...

【浏览器】如何正确使用Microsoft Edge

1、清理主页广告 如今的Microsoft Edge 浏览器 主页太乱了&#xff0c;各种广告推送&#xff0c;点右上角⚙️设置&#xff0c;把快速链接、网站导航、信息提要、背景等全部关闭。这样你就能得到一个超级清爽的主页。 网站导航       关闭 …...

打印1000年到2000年之间的闰年

我们要打印1000年到2000年之间的闰年&#xff0c;首先我们先输出1000年到2000年之间的所有的年份&#xff0c;同时我们将闰年的判断方法输入到其中 闰年需要满足下列两个条件的其中之一&#xff1a; 1.能被4整除但不能被100整除 2.能被400整除 打印1000年到2000年之间的闰年…...

nn.Identity()

在 PyTorch 中&#xff0c;nn.Identity()是一个简单的模块&#xff0c;它的作用是在模型中作为一个占位符或者不进行任何操作的层&#xff0c;直接返回输入。 一、使用方法 以下是一个简单的使用示例&#xff1a; import torch import torch.nn as nn# 创建一个 Identity 层…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

Python 高效图像帧提取与视频编码:实战指南

Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...