Vue-53、Vue技术vuex使用

news2025/4/7 17:48:04

vuex 是什么

1、概念

专门在Vue 中实现集中式状态(数据)管理的一个Vue 插件,对vue 应用中多个组件的共享状态进行集中式的
管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。

2、什么使用vuex

1、多个组件依赖于同一状态
2、来自不同组件的行为需要变更同一状态

vuex 工作原理图

在这里插入图片描述

使用

1、安装vuex (注意vue2中,要使用vuex的3版本,vue3中,要使用vuex的4版本)

vue2 安装

npm i vuex@3 

vue3 安装

npm i vuex@4

2、在src新建vuex文件夹。在vuex文件下新进stors.js文件(store源码如下)

//改文件用于创建最为核心的store
//引入vue
import Vue from "vue";
//引入vuex
import Vuex from 'vuex';
//使用
Vue.use(Vuex);
//准备actions- 用于响应组件中的动作
const actions = {};
//准备mutations- 用于操作数据(state)
const mutations = {};
//准备state- 用于存储数据(state)
const state = {};
//创建store
const store = new Vuex.Store({
    actions,
    mutations,
    state
});
//暴露store
export default store;

3、在main.js中引入和使用

......
//引入vuex
import Vuex from 'vuex'
//引入store
import store from './vuex/store';
//使用
Vue.use(Vuex);


......
new Vue({
  render: h => h(App),
  ....
   store,
  .....
 
}).$mount('#app');

4、store.js增加数据及相应处理处方法 完整代码如下

//改文件用于创建最为核心的store
//引入vue
import Vue from "vue";
//引入vuex
import Vuex from 'vuex';
//使用
Vue.use(Vuex);
//准备actions- 用于响应组件中的动作
const actions = {
    jia:function (context,value) {
        console.log('action中的jia被调用了',context,value);
        context.commit('JIA',value)
    },

    jian:function (context,value) {
        context.commit('JIAN',value);
    },

    SumOdd:function (context,value) {
        context.commit('SUMODD',value)
    },
};
//准备mutations- 用于操作数据(state)
const mutations = {
    JIA(state,value){
        console.log('mutation中的JIA被调用了',state,value);
        state.sum += value;
    },
    JIAN(state,value){
        state.sum -= value;
    },
    SUMODD(state,value){
        if (state.sum % 2){
            state.sum += value;
        }
    }
};
//准备state- 用于存储数据(state)
const state = {
    sum:0 //当前的和
};
//创建store
const store = new Vuex.Store({
    actions,
    mutations,
    state
});
//暴露store
export default store;

5、调用

<template>
    <div >
        <h1>当前求和为:{{$store.state.sum}}</h1>
        <select v-model.number="number">
            <option value="1">1</option>
            <option value="2">2</option>
            <option  value="3">3</option>
        </select><br>
        <button @click="addSum">+</button>
        <button @click="reduceSum">-</button>
        <button @click="addSumOdd">当前和为奇数再加</button>
        <button @click="addSumWait">等等在加</button>
    </div>
</template>
<script>
    export default {
        name: "Category",
        data(){
            return{
                number:1,
            }
        },
        methods:{
            addSum(){
                //this.$store.dispatch('jia',this.number)
                this.$store.commit('JIA',this.number)
            },
            reduceSum(){
                this.$store.dispatch('jian',this.number)

            },
            addSumOdd(){
                this.$store.dispatch('SumOdd',this.number)
            },
            addSumWait(){
                setTimeout(()=>{
                    this.$store.dispatch('jia',this.number)
                },500)
            }
        },
        mounted() {
            console.log(this)
        }
    }
</script>

<style scoped>
   button{
       margin-left: 5px;
   }
</style>

6、getters的使用
在store.js 新增

//准备getters--用于将state中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum*10
    }
};


//创建store
const store = new Vuex.Store({
   ......
    getters,
    ......
});

调用

  <h1>当前求和放大10倍为:{{$store.getters.bigSum}}</h1>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1435534.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

大数据Zookeeper--案例

文章目录 服务器动态上下线监听案例需求需求分析具体实现测试 Zookeeper分布式锁案例原生Zookeeper实现分布式锁Curator框架实现分布式锁 Zookeeper面试重点选举机制生产集群安装多少zk合适zk常用命令 服务器动态上下线监听案例 需求 某分布式系统中&#xff0c;主节点可以有…

发现本地Elasticsearch版本 不兼容第三方管理工具 带大家在官网中寻找并下载指定版本的Elasticsearch

我们在 springboot 整合Elasticsearch时可能会出现版本不兼容异常 首先 大家要搞清楚 目前 Elasticsearch(ES)与springboot 市场版本互相的兼容情况 可以参考我的文章 springboot与Elasticsearch版本兼容对比 这里 我们想下载 其他版本 还是访问官网 https://www.elastic.co/…

探索LLM的意图识别能力

不可否认的是&#xff0c;LLM&#xff08;例如 OpenAI 的 GPT 系列&#xff09;将在不断发展的对话式 AI 领域发挥重要作用。 关于使用 ChatGPT 执行各种任务的帖子和文章不计其数。 GPT 有几个关键功能值得进一步探索&#xff0c;例如其摘要、分类和生成文本的能力。 其中&…

U盘误删的文件怎么找回?5个宝藏方法分享!

“我想问问大家&#xff0c;在使用u盘时如果不小心把很重要的文件删除了应该怎么办呀&#xff1f;有什么简单又快速的U盘文件恢复方法可以推荐吗&#xff1f;” U盘作为一种便携式的存储设备&#xff0c;在日常工作中扮演着重要的角色。然而&#xff0c;如果不小心误删了U盘中的…

SpringBoot:自动配置报告

自动配置报告demo&#xff1a;点击查看 LearnSpringBoot03AutoConfig 点击查看更多的SpringBoot教程 一、application.properties代码 #开启springboot debug模式 #自动配置报告 #Positive matches: 自动配置类启用了&#xff08;自动配置类匹配上了&#xff09;&#xff0c…

hexo和github.io博客的搭建

简要&#xff1a; 最近在牛客网上看到有很多应届毕业生大佬的求职简历上都写上了自己的博客地址&#xff0c;并且在acwing上看到图图佬&#xff0c;铅笔佬也有自己的博客地址&#xff0c;大部分都采用了自己搭建博客的方式&#xff0c;而不是用脏乱差的csdn来写博客。所以我也采…

电脑服务器离线安装.net framework 3.5解决方案(错误:0x8024402c )(如何确定当前系统是否安装NET Framework 3.5)

问题环境&#xff1a; 日常服务的搭建或多或少都会有需要到NET Framework 3.5的微软程序运行框架&#xff0c;本次介绍几种不同的安装方式主要解决运行在Windows 2012 以上的操作系统的服务。 NET Framework 3.5 是什么&#xff1f; .NET Framework是微软公司推出的程序运行框架…

利用LLM大模型生成sql的深入应用探究

Chat2DB 是一款有开源免费的多数据库客户端工具,和传统的数据库客户端软件Navicat、DBeaver 相比 Chat2DB 集成了 AIGC 的能力&#xff0c;能够将自然语言转换为 SQL&#xff0c;也可以将 SQL 转换为自然语言&#xff0c;可以给出研发人员 SQL 的优化建议&#xff0c;极大地提升…

YOLO-World——超级轻量级开放词汇目标检测方法

前言 目标检测一直是计算机视觉领域中不可忽视的基础挑战&#xff0c;对图像理解、机器人技术和自主驾驶等领域具有广泛应用。随着深度神经网络的发展&#xff0c;目标检测方面的研究取得了显著进展。尽管这些方法取得了成功&#xff0c;但它们存在一些限制&#xff0c;主要体…

Python __pycache__文件

pycharm配置位置 几个基本概念 源代码&#xff08;source code&#xff09; 我们每天编写的Python、Java、C等代码通常指的就是源代码&#xff0c;源代码的特点是人类可读。但是CPU只能读懂二进制&#xff0c;看不懂我们写的源代码&#xff0c;因此还需要进行编译&#xff08…

vue2 自定义指令 v-highlight 文本高亮显示分享

简单分享一个文本高亮显示的自定义指令&#xff0c;主要分两部分&#xff1a; 1、代码实现&#xff1a;在 main.js 文件中添加一个自定义指令&#xff0c;实现搜索时文本高亮显示&#xff0c;代码如下&#xff1a; const highlightText (el, searchText) > {const textCo…

安装PyInstaller的保姆级教程

一、安装PyInstaller之前首先要安装Python&#xff0c;小编这里安装的是Python3.9&#xff0c;目前&#xff08;2024/2/6&#xff09;匹配到的最高版本的PyInstaller的版本为6.3.0。需要安装Python的小伙伴可以去这里安装python详细步骤&#xff08;超详细&#xff0c;保姆级&a…

黑马头条 Kafka

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 知…

SpringBoot-基础篇03

之前搭建了整个开发环境实现了登录注册&#xff0c;springBoot整合mybatis完成增删改查&#xff0c;今天完成分页查询&#xff0c;使用阿里云oss存储照片等资源&#xff0c;后期会尝试自己搭建分布式文件系统来实现。 一&#xff0c;SpringBootMybatis完成分页查询 1&#xff…

选择大语言模型:2024 年开源 LLM 入门指南

作者&#xff1a;来自 Elastic Aditya Tripathi 如果说人工智能在 2023 年起飞&#xff0c;这绝对是轻描淡写的说法。数千种新的人工智能工具被推出&#xff0c;人工智能功能被添加到现有的应用程序中&#xff0c;好莱坞因对这项技术的担忧而戛然而止。 甚至还有一个人工智能工…

LLMs之miqu-1-70b:miqu-1-70b的简介、安装和使用方法、案例应用之详细攻略

LLMs之miqu-1-70b&#xff1a;miqu-1-70b的简介、安装和使用方法、案例应用之详细攻略 目录 miqu-1-70b的简介 miqu-1-70b的安装和使用方法 1、安装 2、使用方法 miqu-1-70b的案例应用 miqu-1-70b的简介 2024年1月28日&#xff0c;发布了miqu 70b&#xff0c;潜在系列中的…

Java面向对象 创建类 创建对象

目录 创建类类的属性类的方法实例分析 创建对象创建Test类测试分析 创建类 类的属性 属性用于定义该类或该类对象包含的数据或者说静态特征。属性作用范围是整个类体。 属性定义格式&#xff1a; [修饰符] 属性类型 属性名 [默认值] ;类的方法 方法用于定义该类或该类实例…

【ARM 嵌入式 编译系列 2.7 -- GCC 编译优化参数详细介绍】

请阅读【嵌入式开发学习必备专栏 】 文章目录 GCC 编译优化概述常用优化等级-O1 打开的优化选项-O2 打开的优化选项-O3 打开的优化选项-Os 打开的优化选项优化技术使用优化选项的注意事项GCC 编译优化概述 GCC(GNU Compiler Collection)包含了用于C、C++、Objective-C、Fort…

大模型综述

1.概念 大模型是指人工智能预训练大模型&#xff0c;具有海量参数和复杂架构&#xff0c;用于深度学习任务的模型&#xff0c;拥有强大的处理能力和表征能力&#xff0c;以数据算力为支撑&#xff0c;借助数据管理、模型训练、评估优化、服务平台、插件等辅助工具&#xff0c;…

Windows显示空的可移动磁盘的解决方案

123  大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式…