Vuex存值取值与异步请求处理

目录

前言

一、Vuex简介

1.Vuex是什么

2.Vuex的核心概念

3.使用Vuex的好处

4.Vuex执行流程

二、Vuex的使用步骤

1.安装Vuex

2.创建store模块，分别维护state/actions/mutations/getters

3.使用Vuex存储值，获取值和改变值

1.state.js---存值

2.mutations.js---改变值

3.getters.js---取值

4.store/index.js

5.在main.js中导入并使用store实例

6.在views下创建vuex目录并创建One.vue组件

7.跨页面获取值

4.通过异步实现获取和改变值

5.通过异步实现发送Ajax到后端请求

6.同步和异步的区别

前言

在大型的Vue.js应用中，我们经常需要共享状态和进行复杂的状态管理。Vuex是一个专为Vue.js设计的状态管理库，提供了一种集中式的方式来管理应用的所有组件的状态。本文将详细介绍Vuex的使用方法，包括参数值的获取、修改，以及异步数据处理。

一、Vuex简介

1.Vuex是什么

Vuex是一个专为Vue.js应用设计的状态管理库。它提供了一种集中式的方式来管理应用的所有组件的状态，并且使得状态的变化变得可追踪、可维护。通过使用Vuex，我们可以将共享的数据以及与数据相关的逻辑统一管理，从而提高代码的可读性和可维护性。

在Vue.js应用中，组件之间的通信可以通过props和事件来实现。然而，当应用规模较大时，组件之间的状态交互变得更加复杂，而这些状态往往需要在多个组件之间共享和同步。这时，使用Vuex可以让我们更好地解决这些问题。

2.Vuex的核心概念

  1. State（状态）：存储应用的所有状态数据，类似于组件中的data选项。但是与组件的data不同的是，state存储的状态是全局共享的。

  2. Getter（获取器）：用于对state进行计算或过滤，类似于组件中的computed属性。Getter可以对state进行派生，将其转换成其他形式的值，便于组件使用。

  3. Mutation（突变）：用于修改state的值，必须是同步函数。将组件中的某个操作导致的状态变更封装成mutation，通过提交(commit) mutation来改变state的值。

  4. Action（行动）：用于处理异步操作或复杂的业务逻辑，并提交(commit) mutation来改变state的值。Action可以包含任意异步操作，例如网络请求、定时器等。组件中通过dispatch action来触发异步操作。

  5. Module（模块）：将大型应用分割成更小的模块，每个模块拥有自己的state、getter、mutation和action，以实现更好的代码组织和维护。

3.使用Vuex的好处

  1. 集中式管理：通过将状态集中管理，使得状态的变化更加可追踪和可维护。

  2. 组件通信：Vuex提供了一种在组件间共享状态的机制，简化了组件之间的通信过程。

  3. 开发效率：通过统一管理状态和逻辑，减少了重复的代码，提高了开发效率。

  4. 调试工具支持：Vue开发者工具提供了对Vuex的调试支持，方便我们查看和追踪状态的变化。

  5. 优化性能：通过使用Getter对state进行缓存，避免了重复计算成本，提高性能。

  6. 可扩展性和可维护性：在大型应用中，模块化开发是必要的，使用Vuex可以有序地维护模块之间的关系，使得代码更易于维护和扩展。Vuex的状态管理机制也可以避免因为不同模块数据交互不当导致应用整体性能问题。

4.Vuex执行流程

  1. 创建Vuex Store：首先，在Vue.js应用中创建一个Vuex store实例。这个实例将会承载应用的所有状态和相关的逻辑。我们可以在主入口文件（通常是main.js）中创建store实例，并将其注入到根Vue实例中。

  2. 定义状态(State)：在Vuex的store中定义state，即应用的所有状态数据。这些数据是共享的，可以被多个组件访问和修改。

  3. 使用Getter获取状态：Getter用于对state进行计算或过滤操作，类似于组件中的computed属性。Getter可以对state进行派生，将其转换成其他形式的值，方便组件使用。

  4. 提交Mutation修改状态：Mutation用于修改state的值，必须是同步函数。在store中定义mutation，然后通过commit方法提交(mutate)一个mutation来改变state的值。Mutation是Vuex中唯一修改state的方式，这样做可以保证状态变更的追踪性。

  5. 分发Action处理异步操作：Action用于处理异步操作、复杂业务逻辑或批量的mutation。在store中定义action，然后通过dispatch方法触发一个action的执行。Action可以包含任意异步操作，例如网络请求、定时器等。在action中可以根据需要触发一个或多个mutation来改变state的值。

  6. 组件中使用状态：在Vue组件中，可以通过computed属性或者在template中使用{{}}表达式来获取state或者Getter的值。当需要修改state时，通过commit一个mutation或dispatch一个action来触发状态的变化。

  7. 模块化管理：对于大型应用，可以将store分割成多个模块，每个模块拥有自己的state、getter、mutation和action。这样可以更好地组织和维护代码。

二、Vuex的使用步骤

1.安装Vuex

 npm i -S vuex@3.6.2

在package.json中可以看到Vuex

2.创建store模块，分别维护state/actions/mutations/getters

 注：在store/index.js文件中新建vuex的store实例，并注册引入各大模块

3.使用Vuex存储值，获取值和改变值

1.state.js---存值

export default{name:'美猴王'
}

2.mutations.js---改变值

export default{setName:(state,payload)=>{//state指的是state.js文件中导出的对象//payload是vue文件传递过来的参数state.name=payload.name}
}

3.getters.js---取值

export default{getName:(state)=>{//state指的是state.js文件中导出的对象return state.name;}
}

4.store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'Vue.use(Vuex)const store = new Vuex.Store({state,getters,actions,mutations})export default store

5.在main.js中导入并使用store实例

6.在views下创建vuex目录并创建One.vue组件

<template><div><h1>我是number one</h1>猴名：<input v-model="msg"/><button @click="fun1">获取vuex的值</button><button @click="fun2">改变vuex的值</button></div>
</template><script>export default{data(){return{msg:'吉吉'}},methods: {fun1(){let name= this.$store.state.name;alert(name)},fun2(){this.$store.commit('setName',{name:this.msg})}}}
</script><style>
</style>

效果演示

7.跨页面获取值

<template><div><h1>我是number Two</h1>{{name}}</div>
</template><script>export default {computed:{name(){// return this.$store.state.name;return this.$store.getters.getName;}}}
</script><style>
</style>

注：return this.$store.state.name;打破了封装性

       return this.$store.getters.getName;用该方法也同样可以获取值

效果演示

4.通过异步实现获取和改变值

action.js:异步改变值

export default {setNameSynac:(context,payload) => {//context指的是vuex的上下文setTimeout(function(){context.commit('setName',payload)},6000)
}
};

One.vue组件

<template><div><h1>我是number one</h1>猴名：<input v-model="msg" /><button @click="fun1">获取vuex的值</button><button @click="fun2">改变vuex的值</button><button @click="fun3">异步改变vuex的值</button></div>
</template><script>export default {data() {return {msg: '吉吉'}},methods: {fun1() {let name = this.$store.state.name;alert(name)},fun2() {this.$store.commit('setName', {name: this.msg})},fun3() {this.$store.dispatch('setNameSynac', {name: this.msg})}}}
</script><style>
</style>

效果演示

5.通过异步实现发送Ajax到后端请求

后端代码

package com.ctb.ssm.controller;import com.ctb.ssm.util.JsonResponseBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;
import java.text.SimpleDateFormat;
import java.util.Date;@RestController
@RequestMapping("/vuex")
public class VuexController {@RequestMapping("/queryVuex")public JsonResponseBody<?> queryVuex(HttpServletRequest request) {String resturantName = request.getParameter("resturantName");SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");String date = sdf.format(new Date());try {System.out.println("模拟异步情况，睡眠5秒，不能超过10秒，axios超时时间设置的是10秒！");Thread.sleep(5000);System.out.println("睡醒了，继续...");} catch (Exception e) {e.printStackTrace();}return new JsonResponseBody<>(resturantName + "-" + date,true,0,null);}
}

src/api/action.js配置后端请求

 'VUEX': '/vuex/queryVuex', //Vuex后端异步获取

src/store/action.js异步发送Ajax请求到后端

setNameAjax: (context, payload) => {let _this=payload._thislet url = _this.axios.urls.VUEXlet params = {resturantName: payload.name}_this.axios.post(url, params).then(r => {console.log(r)}).catch(r => {});}

One.vue组件

<template><div><h1>我是number one</h1>猴名：<input v-model="msg" /><button @click="fun1">获取vuex的值</button><button @click="fun2">改变vuex的值</button><button @click="fun3">异步改变vuex的值</button><button @click="fun4">异步发送Ajax请求到后端</button></div>
</template><script>export default {data() {return {msg: '吉吉'}},methods: {fun1() {let name = this.$store.state.name;alert(name)},fun2() {this.$store.commit('setName', {name: this.msg})},fun3() {this.$store.dispatch('setNameSynac', {name: this.msg})},fun4() {this.$store.dispatch('setNameAjax', {name: this.msg,_this: this})}}}
</script><style>
</style>

效果演示

注：

        1.在store/action.js中this并不代表vue实例，所以我们需在vue组件中将this传递过去

        2.异步相应时间超时内容不会显示，我们可以尽量避免时间过长或者可以修改响应后端超时的时间。

6.同步和异步的区别

  1. 同步操作是按顺序执行的，一般用于执行时间较短的操作。而异步操作则是交由系统底层处理，程序继续往下执行。一般用于执行时间较长或需要等待的操作。

  2. 同步操作会阻塞主线程的执行，而异步操作不会阻塞主线程的执行。

  3. 异步操作不需要等待操作完成才能开始下一步操作，而同步操作需要等待操作完成后才能进行下一步操作。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

关于Vuex的基础使用存值及异步

关于Vuex的基础使用存值及异步

目录 一.概述 二.取值 2.1.安装 2.2.菜单栏 2.3.模块 2.4.引用 三.改值 四.异步&后台请求 好啦今天就到这里了希望能帮到你哦&#xff01;&#xff01;&#xff01; 一.概述 Vuex 是一个用于 Vue.js 应用程序的状态管理库。它主要用于集中管理应用程序中的共享状态&a…
阅读更多...
idea中maven plugin提示not found

idea中maven plugin提示not found

在终端中输入&#xff1a; mvn dependency:resolve 然后 解决了部分问题 Plugin org.apache.maven.plugins:maven-jar-plugin:3.1.0 not found 改为3.3.0了 Plugin maven-source-plugin:3.3.0 not found 改为 2.4 了 版本下降了 感觉后继有坑 待观察
阅读更多...
Linux网络和系统管理

Linux网络和系统管理

网络管理命令 1、ifconfig 命令 作用 ifconfig 命令用于显示或设置网络设备的信息。格式 ifconfig [网卡名字] [参数]可选项 网卡名字：指定要操作的网络设备。参数： up：启动指定网卡。down：关闭指定网卡。-a：显示所有网卡接口的信息，包括未激活的网卡接口。使用示例 1…
阅读更多...
时代风口中的Web3.0基建平台，重新定义Web3.0！

时代风口中的Web3.0基建平台，重新定义Web3.0！

近年来&#xff0c;Web3.0概念的广泛兴起&#xff0c;给加密行业带来了崭新的叙事方式&#xff0c;同时也为加密行业提供了更加具有想象力的应用场景与商业空间&#xff0c;并让越来越多的行业从业者们意识到只有更大众化的市场共性需求才能推动加密市场的持续繁荣。当前围绕这…
阅读更多...
IDEA设置自动导入包

IDEA设置自动导入包

IDEA设置自动导入包 首先进入设置选项 之后勾选以下两项&#xff1a; 第一项&#xff1a;IntelliJ IDEA 将在我们书写代码的时候自动帮我们优化导入的包&#xff0c;比如自动去掉一些没有用到的包。 第二项&#xff1a; IntelliJ IDEA 将在我们书写代码的时候自动帮我们导入…
阅读更多...
.NET ABP.Zero 项目疑似内存排查历程

.NET ABP.Zero 项目疑似内存排查历程

当前项目是 .NET 5 EentityFrameworkCore&#xff0c;疑似内存泄漏&#xff0c;之所以说是疑似是因为到目前位置还没有能准确的定位到问题。当前这个框架从 .NET Core 2.1 就开始用&#xff0c;期间有升级到 3.1、5.0、6.0&#xff0c;在排查过程中还把 5.0 分支升级到了 7.0 。…
阅读更多...
HashMap -- 调研

HashMap -- 调研

HashMap 调研 前言JDK1.8之前拉链法: JDK1.8之后JDK1.7 VS JDK1.8 比较优化了一下问题: HashMap的put方法的具体流程?HashMap的扩容resize操作怎么实现的? 前言 在Java中&#xff0c;保存数据有两种比较简单的数据结构:数组和链表。 数组的特点是:寻址容易&#xff0c;插入…
阅读更多...
【RabbitMQ 实战】11 队列的结构和惰性队列

【RabbitMQ 实战】11 队列的结构和惰性队列

一、 队列的结构 队列的组成&#xff1a; 队列由 rabbit_amgqueue_process 和 backing_queue两部分组成。rabbit_amqqueue_process负责协议相关的消息处理&#xff0c;即接收生产者发布的消息、向消费者交付消息、处理消息的确认 (包括生产端的 confirm 和消费端的 ack) 等。…
阅读更多...
Qt/C++原创推流工具/支持多种流媒体服务/ZLMediaKit/srs/mediamtx等

Qt/C++原创推流工具/支持多种流媒体服务/ZLMediaKit/srs/mediamtx等

一、前言 1.1 功能特点 支持各种本地视频文件和网络视频文件。支持各种网络视频流&#xff0c;网络摄像头&#xff0c;协议包括rtsp、rtmp、http。支持将本地摄像头设备推流&#xff0c;可指定分辨率和帧率等。支持将本地桌面推流&#xff0c;可指定屏幕区域和帧率等。自动启…
阅读更多...
【Vuex+ElementUI】Vuex中取值存值以及异步加载的使用

【Vuex+ElementUI】Vuex中取值存值以及异步加载的使用

一、导言 1、引言 Vuex是一个用于Vue.js应用程序的状态管理模式和库。它建立在Vue.js的响应式系统之上&#xff0c;提供了一种集中管理应用程序状态的方式。使用Vuex&#xff0c;您可以将应用程序的状态存储在一个单一的位置&#xff08;即“存储”&#xff09;中&#xff0c;…
阅读更多...
iPhone15手机拓展坞方案，支持手机快充+传输数据功能

iPhone15手机拓展坞方案，支持手机快充+传输数据功能

手机拓展坞的组合有何意义&#xff1f;首先是数据存储场景&#xff0c;借助拓展坞扩展出的接口&#xff0c;可以连接U盘、移动硬盘等采用USB接口的设备&#xff0c;实现大文件的快速存储或者流转&#xff1b;其次是图片、视频的读取场景&#xff0c;想要读取相机、无人机SD/TF存…
阅读更多...
【angular】实现简单的angular国际化(i18n)

【angular】实现简单的angular国际化(i18n)

文章目录 目标过程运行参考 目标 实现简单的angular国际化。本博客实现中文版和法语版。 将Hello i18n!变为中文版&#xff1a;你好 i18n!或法语版:Bonjour l’i18n !。 过程 创建一个项目&#xff1a; ng new i18nDemo在集成终端中打开。 添加本地化包&#xff1a; ng a…
阅读更多...
042：mapboxGL点击某feature点，使其为中心点

042：mapboxGL点击某feature点，使其为中心点

第042个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+mapbox中通过鼠标点击某feature点，让其成为中心点。这里用到了click事件和flyTo的方法。 直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果 文章目录 示例效果配置方式示例源代码（共113行）相关API参…
阅读更多...
spring boot+ vue位置信息大数据综合管理平台源码

spring boot+ vue位置信息大数据综合管理平台源码

spring boot vue位置信息大数据综合管理平台源码 UWB技术的人员定位系统源码 智慧工厂是产业升级的外在表现形式&#xff0c;利用物联网技术加强信息管理的新模式&#xff0c;人员定位管理通过物联网技术、位置信息大数据的综合处理应用&#xff0c;在智慧工厂人员管理方面具有…
阅读更多...
大模型之Prompt研究和技巧

大模型之Prompt研究和技巧

大模型之Prompt研究和技巧 大模型之Prompt编写简介组成技术Zero-ShotFew-shotCOTCOT-SCTOTGoTReAct 大模型之Prompt编写 简介 Prompt是是给 AI **模型的指令&#xff0c;**一个简短的文本输入&#xff0c;用于引导AI模型生成特定的回答或执行特定任务。 Prompt是你与语言模型沟…
阅读更多...
【方法】PDF不能转换成其它格式如何解决？

【方法】PDF不能转换成其它格式如何解决？

想把PDF文件转换成其他格式&#xff0c;比如Word、PPT&#xff0c;却发现无法操作&#xff0c;这是什么情况呢&#xff1f;又该如何解决&#xff1f;下面我们一起来看看吧。 原因1&#xff1a;没有使用PDF编辑器 如果是在线打开PDF&#xff0c;或者使用PDF阅读器打开PDF&…
阅读更多...
将 mysql 数据迁移到 clickhouse (最新版)

将 mysql 数据迁移到 clickhouse (最新版)

一、前驱知识 已经在mysql中插入了海量的数据了&#xff0c;这个时候mysql 承载不了这么大的数据&#xff0c;并且数据只需要查询&#xff0c;修改和删除非常少&#xff0c;并且不需要支持事务&#xff0c;这个时候需要换一个底层存储&#xff0c;这里选用的是 clickhouse 来进…
阅读更多...
【论文阅读】面向抽取和理解基于Transformer的自动作文评分模型的隐式评价标准（实验结果部分）

【论文阅读】面向抽取和理解基于Transformer的自动作文评分模型的隐式评价标准（实验结果部分）

方法 结果 在这一部分&#xff0c;我们展示对于每个模型比较的聚合的统计分析当涉及到计算特征和独立的特征组&#xff08;表格1&#xff09;&#xff0c;抽取功能组和对齐重要功能组&#xff08;表格2&#xff09;&#xff0c;并且最后&#xff0c;我们提供从模型比较&#x…
阅读更多...
解读非托管流动性协议Hover： 差异化、层次化的全新借贷体系

解读非托管流动性协议Hover： 差异化、层次化的全新借贷体系

“Hover 是 DeFi 借贷赛道的另辟蹊径者&#xff0c;除了在自身机制&#xff08;借贷模型、治理体系&#xff09;上进行创新获得内生动力外&#xff0c;背靠日渐繁荣的 Kava、Cosmos 生态进一步获得外生动力&#xff0c;发展潜力俱佳” 与 DEX 类似&#xff0c;借贷也是 DeFi 世…
阅读更多...
深度学习DAY3：FFNNLM前馈神经网络语言模型

深度学习DAY3：FFNNLM前馈神经网络语言模型

1 神经网络语言模型NNLM的提出 文章&#xff1a;自然语言处理中的语言模型预训练方法&#xff08;ELMo、GPT和BERT&#xff09; https://www.cnblogs.com/robert-dlut/p/9824346.html 语言模型不需要人工标注语料&#xff08;属于自监督模型&#xff09;&#xff0c;所以语言…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023