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

2023-10-12 07:01
文章标签 请求 处理 异步 取值 vuex 存值

本文主要是介绍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. 异步操作不需要等待操作完成才能开始下一步操作，而同步操作需要等待操作完成后才能进行下一步操作。

这篇关于Vuex存值取值与异步请求处理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/194148。

相关文章

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题：墙体两侧特征混淆误匹配，导致建图和定位偏差，表现为过门跳变、外月台走歪等 ·解决思路：预期的根治方案IGICP需要较长时间完成上线，先使用切分地图的工程化方案，即墙体两侧切分为不同地图，在某一侧只使用该侧地图进行定位 方案思路 切分原理：切分地图基于关键帧位置，而非点云。 理论基础：光照是直线的，一帧点云必定只能照射到墙的一侧，无法同时照到两侧实践考虑：关
阅读更多...
【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入（Embedding）方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节：嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”，它将文本中的单词或短语转换成计算机能够理解的数学形式，即向量。 正如翻译机将一种语言
阅读更多...
Thymeleaf：生成静态文件及异常处理java.lang.NoClassDefFoundError: ognl/PropertyAccessor

Thymeleaf：生成静态文件及异常处理java.lang.NoClassDefFoundError: ognl/PropertyAccessor

我们需要引入包： <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>sp
阅读更多...
js异步提交form表单的解决方案

js异步提交form表单的解决方案

1.定义异步提交表单的方法 （通用方法） /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如：URLDecoder.decode(param,"UTF-8")</strong></span>
阅读更多...
jenkins 插件执行shell命令时，提示“Command not found”处理方法

jenkins 插件执行shell命令时，提示“Command not found”处理方法

首先提示找不到“Command not found，可能我们第一反应是查看目标机器是否已支持该命令，不过如果相信能找到这里来的朋友估计遇到的跟我一样，其实目标机器是没有问题的通过一些远程工具执行shell命令是可以执行。奇怪的就是通过jenkinsSSH插件无法执行，经一番折腾各种搜索发现是jenkins没有加载/etc/profile导致。 【解决办法】： 需要在jenkins调用shell脚
阅读更多...
明明的随机数处理问题分析与解决方案

明明的随机数处理问题分析与解决方案

明明的随机数处理问题分析与解决方案 引言问题描述解决方案数据结构设计具体步骤伪代码C语言实现详细解释读取输入去重操作排序操作输出结果复杂度分析 引言 明明生成了N个1到500之间的随机整数，我们需要对这些整数进行处理，删去重复的数字，然后进行排序并输出结果。本文将详细讲解如何通过算法、数据结构以及C语言来解决这个问题。我们将会使用数组和哈希表来实现去重操作，再利用排序算法对结果
阅读更多...
8. 自然语言处理中的深度学习：从词向量到BERT

8. 自然语言处理中的深度学习：从词向量到BERT

引言 深度学习在自然语言处理（NLP）领域的应用极大地推动了语言理解和生成技术的发展。通过从词向量到预训练模型（如BERT）的演进，NLP技术在机器翻译、情感分析、问答系统等任务中取得了显著成果。本篇博文将探讨深度学习在NLP中的核心技术，包括词向量、序列模型（如RNN、LSTM），以及BERT等预训练模型的崛起及其实际应用。 1. 词向量的生成与应用 词向量（Word Embedding）
阅读更多...
使用协程实现高并发的I/O处理

使用协程实现高并发的I/O处理

文章目录 1. 协程简介1.1 什么是协程？1.2 协程的特点1.3 Python 中的协程 2. 协程的基本概念2.1 事件循环2.2 协程函数2.3 Future 对象 3. 使用协程实现高并发的 I/O 处理3.1 网络请求3.2 文件读写 4. 实际应用场景4.1 网络爬虫4.2 文件处理 5. 性能分析5.1 上下文切换开销5.2 I/O 等待时间 6. 最佳实践6.1 使用 as
阅读更多...
Level3 — PART 3 — 自然语言处理与文本分析

Level3 — PART 3 — 自然语言处理与文本分析

目录 自然语言处理概要 分词与词性标注 N-Gram 分词 分词及词性标注的难点 法则式分词法 全切分 FMM和BMM Bi-direction MM 优缺点 统计式分词法 N-Gram概率模型 HMM概率模型 词性标注（Part-of-Speech Tagging） HMM 文本挖掘概要 信息检索（Information Retrieval） 全文扫描 关键词
阅读更多...
PHP7扩展开发之数组处理

PHP7扩展开发之数组处理

前言 这次，我们将演示如何在PHP扩展中如何对数组进行处理。要实现的PHP代码如下： <?phpfunction array_concat ($arr, $prefix) {foreach($arr as $key => $val) {if (isset($prefix[$key]) && is_string($val) && is_string($prefix[$key])) {$arr[
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2