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

快速入门——状态管理VueX

news 来源：原创 2025/9/14 18:56:33

Vuex介绍

状态管理

每一个Vuex应用的核心都是一个store，与普通的全局对象不同的是，基于Vue数据与视图绑定的特点，当store中的状态发生变化时，与之绑定的视图也会被重新渲染。

store中的状态不允许被直接修改，改变store中的状态的唯一途径就是显示地提交，这可以让我们方便地跟踪每一个状态的变化。

在大型复杂应用中，如果无法有效地跟踪到状态的变化，将会对理解和维护代码带来极大的困难。

Vuex中有5个重要的概念：State，Getter，Mutation，Action，Module

State用于维护所有应用层的状态，并确保应用只有唯一的数据源.Mutation提供修改State状态的方法

//创建一个新的store实例

const store = createStore({

        state (){

                return {

                        count: 0

                }

        },

        mutations:{

                increment(state){

                        state.count++

                }

        }

})

 在组件中，可以直接使用this.$store.state.count访问数据，也可先用mapState辅助函数将其映射下来。

//单独构建的版本中辅助函数为Vuex.mapState

import { mapState } from 'vuex'

export default{

        coputed: mapState({

                count:state => state.count.

                countAlias: 'count',

                countPlusLocalState(state){

                       return state.count+this.localCount 

                }

        })

}

Mutation同步操作

在组件中，可以直接使用store.commit来提交mutation

method:{increment(){this.$store.commit('increment')console.log(this.$store.state.count)}
}

 也可以先用mapMutation辅助函数将其映射下来

methods: {...mapMutations(['increment','incrementBy'])
},

Getter维护由State派生的一些状态，这些状态随着State状态的变化而变化

Action

类似于Mutation，适合做异步操作

Action不能直接修改状态，只能通过提交mutation来修改

const store = createStore({state: {count: 0},mutations: {increment(state){state++}},actions: {increment(context){context.commit('increment')}}})

相关文章：

快速入门——状态管理VueX

Vuex介绍 状态管理 每一个Vuex应用的核心都是一个store，与普通的全局对象不同的是，基于Vue数据与视图绑定的特点，当store中的状态发生变化时，与之绑定的视图也会被重新渲染。 store中的状态不允许被直接修改，改变sto…...

编程日记 2025/9/14 18:56:33

C# 根据Ollama+DeepSeekR1开发本地AI辅助办公助手

在上一篇《访问DeepSeekR1本地部署API服务搭建自己的AI办公助手》中，我们通过通过Ollama提供的本地API接口用Python实现了一个简易的AI办公助手，但是需要运行Py脚本，还比较麻烦，下面我们用C#依据Ollama提供的API接口开发一个本地A…...

编程日记 2025/9/15 4:36:21

Flutter - 基础Widget

Flutter 中万物皆 Widget，基础Widget 同步对应 Android View. 普通文本 Text /*** 控制文本样式统一使用 style:TextStyle, 例：fontSize(字体大小),color(颜色),shadows(阴影)等等* 控制文本布局需单独设置：* textAlign(文不对齐方式)* te…...

编程日记 2025/9/14 19:12:27

Tips ：仿真竞争条件 指的是什么？

文章目录 **为什么会出现仿真竞争条件？****典型场景举例****System Verilog 如何解决竞争条件？****1. 使用 `program` 块隔离测试平台****2. 使用 `clocking` 块明确时序关系****3. 非阻塞赋值（`<=`）的合理使用****竞争条件的根本原因****总结****代码结构****1. 设计模…...

编程日记 2025/9/15 4:35:53

【Elasticsearch】script_fields 和 runtime_fields的区别

script_fields和runtime_fields都是 Elasticsearch 中用于动态计算字段值的功能&#xff0c;但它们在实现方式、应用场景和性能表现上存在显著区别。以下是两者的详细对比&#xff1a; 1.定义和应用场景 • script_fields&#xff1a; • 定义&#xff1a;通过 Painless 脚本…...

编程日记 2025/9/12 17:37:36

达梦DTS数据迁移工具生产篇（MySQL-＞DM8）

本文章使用的DTS工具为 2024年9月18日的版本&#xff0c;使用的目的端DM8数据库版本为2023年12月的版本&#xff0c;注意数据库版本和DTS版本之间跨度不要太大&#xff0c;以免出现各种兼容性的报错。若发现版本差距过大时&#xff0c;请联系达梦技术服务工程师处理。 1. 迁移…...

编程日记 2025/9/15 4:36:21

【安卓逆向】逆向APP界面UI修改再安装

1.背景 有一客户找到我&#xff0c;说能不能把APP首页的底部多余界面去掉。 逆向实战 想要去除安卓应用软件中的内容&#xff0c;需要对APP逆向进行修改再打包。 通过工具 MIT管理器工具 提取APK包&#xff0c;点击apk文件&#xff0c;点击查看反编译apk。 搜索关键字。这里关键…...

编程日记 2025/9/13 5:34:21

企业级大模型应用的Java-Python异构融合架构实践

一、后端语言相关技术生态 Python语言 Python在AI计算领域拥有全面的生态支持&#xff1a; 底层工具库: Pandas、NumPy、SciPy、Matplotlib深度学习框架: PyTorch、TensorFlow领域专用框架: HuggingFace Transformers&#xff08;社区生态为主&#xff09; 常见Python框架 …...

编程日记 2025/9/9 16:03:24

深度剖析数据中台架构图，铸造数字文明的基石

🔥🔥 AllData大数据产品是可定义数据中台，以数据平台为底座，以数据中台为桥梁，以机器学习平台为中层框架，以大模型应用为上游产品，提供全链路数字化解决方案。 ✨奥零数据科技官网：http://www.aolingdata.com ✨AllData开源项目：https://github.com/alldatacenter/a…...

编程日记 2025/9/8 12:06:47

python实现基于文心一言大模型的sql小工具

一、准备工作 注册与登录&#xff1a; 登录百度智能云千帆控制台&#xff0c;注册并登录您的账号。 创建千帆应用&#xff1a; 根据实际需求创建千帆应用。创建成功后&#xff0c;获取AppID、API Key、Secret Key等信息。如果已有千帆应用&#xff0c;可以直接查看已有应用的AP…...

编程日记 2025/9/10 18:45:07

飞腾腾锐D2000 + OpenHarmony 4.1release部署deepseek大模型

简介 1.1 飞腾腾锐D2000 飞腾腾锐D2000是一款面向桌面应用的高性能通用处理&#xff0c;集成8个飞腾自主研发的高能效处理器核FTC663&#xff0c;兼 容64位ARMv8指令集并支持ARM64和ARM32两种执行模式&#xff0c;支持单精度、双精度浮点运算指令和ASIMD处理 指令&#xff0c;主…...

编程日记 2025/9/15 0:13:17

进程概念、PCB及进程查看

文章目录 一.进程的概念进程控制块&#xff08;PCB&#xff09; 二.进程查看通过指令查看进程通过proc目录查看进程的cwd和exe获取进程pid和ppid通过fork()创建子进程 一.进程的概念 进程是一个运行起来的程序&#xff0c;而程序是存放在磁盘的&#xff0c;cpu要想执行程序的指…...

编程日记 2025/9/14 13:43:59

Oracle 数据库基础入门（一）：搭建数据管理基石

在当今数字化时代&#xff0c;数据库作为数据管理的核心工具&#xff0c;对于各类应用系统的开发至关重要。尤其是在 Java 全栈开发领域&#xff0c;掌握一款强大的数据库技术是必备技能。Oracle 数据库以其卓越的性能、高度的可靠性和丰富的功能&#xff0c;在企业级应用中广泛…...

编程日记 2025/9/14 22:55:05

selenium如何实现，开启浏览器的开发者工具模式，并且开启 toggle移动设备模拟模式

核心实现代码 pythonCopy Code from selenium import webdriver from selenium.webdriver.chrome.options import Options def enable_devtools_with_toggle(): options Options() # 强制开启开发者工具 options.add_argument("--auto-open-devtools-for-tabs&quo…...

编程日记 2025/9/10 21:12:06

分布式锁实现（数据库+Redis+Zookeeper）

1. 数据库分布式锁 实现原理 基于唯一索引&#xff1a; 创建一张锁表&#xff0c;通过唯一索引&#xff08;如锁名称&#xff09;保证互斥性。 加锁&#xff1a;插入一条记录&#xff0c;成功则获取锁&#xff0c;失败则重试。 解锁&#xff1a;删除对应记录。 乐观锁&…...

编程日记 2025/9/10 7:37:36

七、Spring Boot：初识与项目搭建

深入解析 Spring Boot&#xff1a;初识与项目搭建 Spring Boot 是基于 Spring Framework 的开源 Java 基础框架&#xff0c;旨在简化 Spring 应用的开发过程。它通过“约定优于配置”的理念&#xff0c;极大地减少了开发中的配置工作&#xff0c;同时提供了“开箱即用”的功能…...

编程日记 2025/9/12 18:51:16

记录一下用docker克隆某授权制定ip的环境恢复

#首先还是要看日志根据问题去进行调整 java web的老项目配置文件一般是 bin启动里边的脚本 还有conf中的 xml配置文件 再或者就是classes中的配置文件,再或者就是lib中的jar包中的配置文件 1.安装docker 2.创建docker网络 docker network create --driver bridge --subnet…...

编程日记 2025/9/11 20:48:22

【含文档+PPT+源码】基于微信小程序的健康饮食食谱推荐平台的设计与实现

项目介绍 本课程演示的是一款基于微信小程序的健康饮食食谱推荐平台的设计与实现&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含&#xff1a;项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本…...

编程日记 2025/9/10 16:15:23

主流虚拟化技术讲解

目录 VMware vSphere Microsoft Hyper-V KVM&#xff08;Kernel-based Virtual Machine&#xff09; OpenStack VMware vSphere 架构与组件&#xff1a;VMware vSphere 是基于裸金属虚拟化技术的平台&#xff0c;核心组件包括 ESXi 主机和 vCenter Server。ESXi 是虚拟化层…...

编程日记 2025/9/13 0:18:56

java开发——为什么要使用动态代理？

举个例子&#xff1a;假如有一个杀手专杀男的&#xff0c;不杀女的。代码如下&#xff1a; public interface Killer {void kill(String name, String sex);void watch(String name); }public class ManKiller implements Killer {Overridepublic void kill(String name, Stri…...

编程日记 2025/9/14 8:11:06

kotlin 知识点一 变量和函数

在Kotlin中定义变量的方式和Java 区别很大&#xff0c;在Java 中如果想要定义一个变 量&#xff0c;需要在变量前面声明这个变量的类型&#xff0c;比如说int a表示a是一个整型变量&#xff0c;String b表 示b是一个字符串变量。而Kotlin中定义一个变量&#xff0c;只允许在变量…...

编程日记 2025/9/13 15:46:00

将CUBE或3DL LUT转换为PNG图像

概述 在大部分情况下&#xff0c;LUT 文件通常为 CUBE 或 3DL 格式。但是我们在 OpenGL Shader 中使用的LUT&#xff0c;通常是图像格式的 LUT 文件。下面&#xff0c;我将教大家如何将这些文件转换为 PNG 图像格式。 条形LUT在线转换&#xff08;不是8x8网络&#xff09;&am…...

编程日记 2025/9/15 1:56:09

侯捷 C++ 课程学习笔记：类的声明与构造函数

目录 一、类的声明 二、内联函数 三、访问级别 四、构造函数 五、构造函数重载 六、实际应用案例 七、学习心得 一、类的声明 类的声明是定义类的基本结构&#xff0c;包括类的成员变量和成员函数。类的声明分为类头和类体两部分。 类头&#xff08;class head&#xf…...

编程日记 2025/9/13 20:31:14

BGP状态和机制

BGP邻居优化 为了增加稳定性，通常建议实验回环口来建立邻居。更新源：建立邻居和邻居所学习到的路由的下一跳。多跳：EBGP邻居建立默认选哟直连，因为TTL=1，如果非直连，必须修改TTL。命令备注peer 2.2.2.2 connect-interface lo1配置更新源peer 2.2.2.2 ebgp-max-hop 2配置T…...

编程日记 2025/9/14 20:13:42

MongoDB 数据库简介

MongoDB 数据库简介 引言 随着互联网技术的飞速发展，数据已经成为企业的重要资产。为了高效地管理和处理这些数据，数据库技术应运而生。MongoDB作为一种流行的NoSQL数据库，因其灵活的数据模型和高效的数据处理能力，受到了广泛的关注。本文将为您详细介绍MongoDB的基本概念…...

编程日记 2025/9/11 13:59:42

浏览器下载vue.js.devtools，谷歌浏览器和edg浏览器

1、谷歌浏览器下载&#xff1a; 情况一&#xff1a;如果谷歌应用商店可以打开&#xff0c;那么就直接到谷歌应用商店下载&#xff0c;直接搜索vue.js.devtools添加扩展即可。 情况二&#xff1a;谷歌浏览器的谷歌应用商城打不开&#xff0c;那么就百度搜索极简插件找到vue.js.…...

编程日记 2025/9/15 4:27:52

Android AOSP系统裁记录

Android 系统裁剪是指根据需求移除不必要的组件和功能&#xff0c;以优化系统性能、减少存储占用或满足特定设备需求。以下是 Android 系统裁剪的基本步骤&#xff1a; 1. 准备环境 操作系统&#xff1a;推荐使用 Ubuntu 或 macOS。 工具&#xff1a; Android SDK Android N…...

编程日记 2025/9/9 21:20:02

Could not download npm for node v14.21.3（nvm无法下载节点v14.21.3的npm）

场景描述&#xff1a;之前的项目用的是node以前的版本&#xff0c;使用nvm没下载下来&#xff0c;npm命令执行不了 错误如下图&#xff0c;15版本的node同理&#xff0c;下载的都是.exe可执行文件的扩展名&#xff0c;使用npm命令终端无法识别 解决思路&#xff1a;去node官网…...

编程日记 2025/9/15 0:52:54

React进阶之React核心源码解析（三）

React核心源码解析 diff多节点比较diff两轮遍历比较第一轮比较第二轮比较Update 状态更新Concurrent Modediff 多节点比较diff isArray方法比较 节点更新// 更新前 <ul><li key="0" className="before">0<li><li key=...

编程日记 2025/9/14 21:02:55

2025吐槽季第一弹---腾讯云EO边缘安全加速平台服务

前言&#xff1a; 关于EO边缘安全加速平台服务 参照&#xff1a;产品概述,具体如下&#xff1a; 边缘安全加速平台 EO&#xff08;Tencent Cloud EdgeOne&#xff0c;下文简称为 EdgeOne&#xff09;是国内首款基于全新架构的真正一体化的边缘安全加速平台。提供全面的安全防…...

编程日记 2025/9/8 16:55:22

Dify自定义工作流集成指南:对接阿里云百炼文生图API的实现方案

dify工作流的应用基本解释 dify应用发布相关地址&#xff1a;应用发布 | Dify 根据官方教程&#xff0c;我们可以看到dify自定义的工作流可以发布为----工具 这个教程将介绍如何通过工作流建立一个使用阿里云百炼文生图模型。 工具则可以给其他功能使用&#xff0c;如agent…...

编程日记 2025/9/10 12:13:25

WebSocket简单介绍 并接入deepseek

目录 什么是 WebSocket&#xff1f;工作原理&#xff1a; 为什么需要 WebSocket&#xff1f;WebSocket 的优势HTTP 和 WebSocket 的区别WebSocket 的劣势WebSocket 的应用场景WebSocket 握手过程1. 客户端发起握手请求2. 服务器响应握手请求3. 建立连接 WebSocket 事件处理WebS…...

编程日记 2025/9/9 20:49:24

android 新增native binder service 方式（三）

书接上回&#xff0c;继续第三种方式&#xff0c;是手动生成 service binder 的方法,项目结构 1&#xff0c;编译aidl aidl 文件保持不变&#xff0c;如何生成Bn和Bp 文件呢。 aidl -I ./libserviceaidl/aidl -h ./ -o ./ --langcpp libserviceaidl/aidl/com/test/IService.a…...

编程日记 2025/9/8 12:00:17

linux--多进程开发（5）--进程

进程间通讯概念 每两个进程之间都是独立的资源分配单元&#xff0c;不同进程之间不能直接访问另一个进程的资源。 但不同的进程需要进行信息的交互和状态的传递等&#xff0c;因此需要进程间通信&#xff08;IPC,inter processes cimmunication) 进程通信的目的&#xff1a; …...

编程日记 2025/9/10 4:09:00

分享httprunner 结合django实现平台接口自动化方案

说明&#xff0c;可以直接在某个视图集定义自定义接口来验证。 调试1&#xff1a;前端界面直接编写yaml文件. 新增要实现存数据到mysql&#xff0c;同时存文件到testcase下, 如test.yaml 更新yaml数据&#xff0c;同时做到更新 testcase下的文件&#xff0c;如test.yaml acti…...

编程日记 2025/9/13 13:34:20

前端面试题之HTML篇

1.src和href的区别 src用于替换当前元素&#xff0c;href用于在当前文档和引用资源之间确立联系。 src可用于img、input、style、script、iframe---同步加载执行 href可用于link、a---异步 1.用途不同 src 用于引入外部资源&#xff0c;通常是图像、视频、JavaScript 文件等&am…...

编程日记 2025/9/9 20:28:17

Selenium 调用模型接口实现功能测试

要使用 Selenium 调用模型接口实现功能测试，可按以下步骤进行： 1. 环境准备 安装 Selenium：使用 pip install selenium 安装 Selenium 库。安装浏览器驱动：根据使用的浏览器（如 Chrome、Firefox 等）下载对应的驱动，并将其添加到系统的环境变量中。例如，Chrome 浏览器需…...

编程日记 2025/9/8 18:35:52

java后端开发day18--学生管理系统

&#xff08;以下内容全部来自上述课程&#xff09; 1.业务分析并搭建主菜单 1.需求 采取控制台的方式去书写学生管理系统 2.分析 1.初始菜单 2.学生类 属性&#xff1a;id&#xff0c;姓名&#xff0c;年龄&#xff0c;家庭住址 3.添加功能 键盘录入每一个学生信息并…...

编程日记 2025/9/10 1:01:35

计算机毕业设计SpringBoot+Vue.jst0图书馆管理系统(源码+LW文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/9/13 9:37:05

【DeepSeek】【GPT-Academic】:DeepSeek集成到GPT-Academic（官方+第三方）

目录 1 官方deepseek 1.1 拉取学术GPT项目 1.2 安装依赖 1.3 修改配置文件中的DEEPSEEK_API_KEY 2 第三方API 2.1 修改DEEPSEEK_API_KEY 2.2 修改CUSTOM_API_KEY_PATTERM 2.3 地址重定向 2.4 修改模型参数 2.5 成功调用 2.6 尝试添加一个deepseek-r1参数 3 使用千帆…...

编程日记 2025/9/14 9:32:35

生成对抗网络（GAN）：让机器学习“创造”新世界

目录 引言 什么是生成对抗网络&#xff08;GAN&#xff09;&#xff1f; GAN的核心原理 GAN的损失函数 GAN的变种 1. 条件生成对抗网络&#xff08;Conditional GAN, cGAN&#xff09; 2. 深度卷积生成对抗网络&#xff08;DCGAN&#xff09; 3. 生成对抗网络的 Wassers…...

编程日记 2025/9/13 17:26:15

JavaScript系列（87）--Webpack 高级配置详解

Webpack 高级配置详解 &#x1f6e0;️ Webpack 是前端工程化中最流行的构建工具之一&#xff0c;掌握其高级配置可以帮助我们构建更高效、更优化的应用。本文将深入探讨Webpack的高级配置技巧和最佳实践。 Webpack 核心概念回顾 &#x1f31f; &#x1f4a1; 小知识&#xf…...

编程日记 2025/9/11 19:09:27

48.日常算法

1.面试题 03.06. 动物收容所 题目来源 动物收容所。有家动物收容所只收容狗与猫&#xff0c;且严格遵守“先进先出”的原则。在收养该收容所的动物时&#xff0c;收养人只能收养所有动物中“最老”&#xff08;由其进入收容所的时间长短而定&#xff09;的动物&#xff0c;或…...

编程日记 2025/9/11 10:18:47

MySql数据库运维学习笔记

数据库运维常识 DQL、DML、DCL 和 DDL 是 SQL&#xff08;结构化查询语言&#xff09;中的四个重要类别&#xff0c;它们分别用于不同类型的数据库操作&#xff0c;下面为你简单明了地解释这四类语句&#xff1a; 1. DQL&#xff08;数据查询语言&#xff0c;Data Query Langu…...

编程日记 2025/9/8 11:48:39

Starlink卫星动力学系统仿真建模第十讲-基于SMC和四元数的卫星姿态控制示例及Python实现

基于四元数与滑模控制的卫星姿态控制 一、基本原理 1. 四元数姿态表示 四元数运动学方程&#xff1a; 3. 滑模控制设计 二、代码实现&#xff08;Python&#xff09; 1. 四元数运算工具 import numpy as npdef quat_mult(q1, q2):"""四元数乘法""…...

编程日记 2025/9/12 7:01:22

MongoDB学习

MongoDB 是一种流行的 NoSQL 数据库&#xff0c;以文档存储为核心&#xff0c;适用于高灵活性、高扩展性的场景。本文将从基础概念到实际应用&#xff0c;带你快速掌握 MongoDB 的核心操作。 1. MongoDB 简介 什么是 MongoDB&#xff1f; MongoDB 是一个基于分布式文件存储的…...

编程日记 2025/9/14 15:29:37

水利工程安全包括哪几个方面

水利工程安全培训的内容主要包括以下几个方面&#xff1a; 基础知识和技能培训 &#xff1a; 法律法规 &#xff1a;学习水利工程相关的安全生产法律法规&#xff0c;了解安全生产标准及规范。 事故案例 &#xff1a;通过分析事故案例&#xff0c;了解事故原因和教训&#x…...

编程日记 2025/9/10 0:19:38

九、数据治理架构流程

一、总体结构 《数据治理架构流程图》&#xff08;Data Governance Architecture Flowchart&#xff09; 水平结构&#xff1a;流程图采用水平组织&#xff0c;显示从数据源到数据应用的进程。 垂直结构&#xff1a;每个水平部分进一步划分为垂直列&#xff0c;代表数据治理的…...

编程日记 2025/9/14 18:43:12

Spring boot中的@ConfigurationProperties注解

Spring boot中的ConfigurationProperties注解 ConfigurationProperties 是 Spring Boot 提供的一个强大注解&#xff0c;用于将配置文件&#xff08;如 application.properties 或 application.yml&#xff09;中的配置绑定到一个 Java 对象中。它不仅简化了配置管理&#xff…...

编程日记 2025/9/14 4:01:24

04性能监控与调优篇（D2_JVM调优⼯具）

目录 学习前言 讲解一&#xff1a;理论篇&#xff08;深入理解JVM第三版&#xff09; 一、虚拟机性能监控、故障处理工具 1. 基本介绍 2. 基础故障处理工具 jps&#xff1a;虚拟机进程状况工具 jstat&#xff1a;虚拟机统计信息监视工具 jinfo&#xff1a;Java配置信息工…...

编程日记 2025/9/11 23:00:55