当前位置: 首页 > 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 层…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

恶补电源:1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II(Linked List Cycle II)详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一&#xff1a;HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二&#xff1a;Floyd 快慢指针法&#xff08;…...

门静脉高压——表现

一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构&#xff1a;由肠系膜上静脉和脾静脉汇合构成&#xff0c;是肝脏血液供应的主要来源。淤血后果&#xff1a;门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血&#xff0c;引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...

欢乐熊大话蓝牙知识17:多连接 BLE 怎么设计服务不会乱?分层思维来救场!

多连接 BLE 怎么设计服务不会乱&#xff1f;分层思维来救场&#xff01; 作者按&#xff1a; 你是不是也遇到过 BLE 多连接时&#xff0c;调试现场像网吧“掉线风暴”&#xff1f; 温度传感器连上了&#xff0c;心率带丢了&#xff1b;一边 OTA 更新&#xff0c;一边通知卡壳。…...

vxe-table vue 表格复选框多选数据,实现快捷键 Shift 批量选择功能

vxe-table vue 表格复选框多选数据&#xff0c;实现快捷键 Shift 批量选择功能 查看官网&#xff1a;https://vxetable.cn 效果 代码 通过 checkbox-config.isShift 启用批量选中,启用后按住快捷键和鼠标批量选取 <template><div><vxe-grid v-bind"gri…...