Vuex获取、修改参数值及异步数据处理

14天阅读挑战赛
学不可以已...

目录

一、Vuex简介

1.1 vuex介绍

1.2 vuex核心

二、Vuex使用

2.1 Vuex安装

2.2 创建store模块

2.3 创建vuex的store实例并注册上面引入的各大模块

三、使用Vuex获取、修改值案例

3.1 创建两个菜单组件

3.2 配置路由

3.3 模拟菜单数据

3.4 vuex核心操作

3.5 界面获取、修改值实现

四、异步处理

4.1 异步改变值

4.2 异步发送Ajax到后端

Tips❕

一、Vuex简介

1.1 vuex介绍

        Vuex是专门为vue应用程序开发的状态管理模式，将组件的共享状态抽取出来，以一个全局单例模式进行管理，组件树构成一个巨大的视图，不管组件在树的何种位置，任何组件都能获取到状态和触发行为。可以将其想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作。（核心就是 解决组件间的通讯问题）

1.2 vuex核心

  1. State（单一状态树）：存储应用程序的状态数据，类似于组件中的data属性。但与组件的data不同，Vuex的状态是响应式的，当状态发生变化时，所有依赖该状态的组件都会自动更新。

  2. Getters（状态获取）：用于从状态中派生出新的数据，类似于Vue组件中的计算属性。Getters可以对状态进行一些计算或过滤，并将结果暴露给组件使用。

  3. Mutations（变更）：用于修改状态的唯一途径。Mutations是同步的操作，用于处理同步的状态变更。每个Mutation都有一个字符串类型的事件名称和一个回调函数，通过提交（commit）Mutation来触发状态的变更。

  4. Actions（动作：提交mutation，可以包含异步操作）：用于处理异步操作和复杂的业务逻辑。Actions可以包含任意异步操作，例如发送网络请求或执行定时任务，并通过提交Mutations来修改状态。Actions可以通过分发（dispatch）来触发。

  5. Modules（模块）：用于将大型的Vuex应用程序拆分为更小的模块，每个模块都有自己的状态、获取器、变更和动作。这样可以更好地组织代码，提高代码的可维护性和可扩展性。

使用Vuex可以带来以下好处：

  1. 集中式的状态管理：将应用程序的状态集中管理，使得状态的变更更加可追踪和可维护。

  2. 组件之间的数据共享：不同组件之间可以轻松地共享状态，避免了通过props和事件传递数据的繁琐过程。

  3. 状态的可预测性：通过明确的状态变更方式（Mutations和Actions），可以更好地追踪状态的变化，提高代码的可读性和可维护性。

  4. 插件扩展：Vuex提供了丰富的插件机制，可以方便地扩展Vuex的功能，例如添加日志记录、持久化存储等。

二、Vuex使用

2.1 Vuex安装

注意： 运行环境

1、node.js版本10输入下指令进行安装

npm install vuex -S

2、node.js版本18请执行下指令 

npm i -S vuex@3.6.2

2.2 创建store模块

创建store目录及需要的文件：

2.3 创建vuex的store实例并注册上面引入的各大模块

1、src/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

 2、src/main.js

通过在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件可以通过this.$store访问到。

三、使用Vuex获取、修改值案例

3.1 创建两个菜单组件

src/views/vuex

3.2 配置路由

src/router/index.js

3.3 模拟菜单数据

    <!-- 模拟数据 --><el-submenu key="key_999" index="index_999"><template slot="title"><span slot="title">Vuex管理</span></template><el-menu-item key="key_99901" index="/vuex/pageOne"><span>pageOne</span></el-menu-item><el-menu-item key="key_99902" index="/vuex/pageTwo"><span>pageTwo</span></el-menu-item></el-submenu>

3.4 vuex核心操作

1、在state.js中定义全局参数

export default {Name: '云村小威'
}

2、在mutations.js中改变值

export default {/* 1.state指state.js文件导入的对象2.payload指vue文件传递过来的界面*/setName: (state, payload) => {state.Name = payload.Name}
}

3、在getters.js中获取参数值

export default {getName: (state) => {return state.Name;}
}

        这一些列操作相当于java分装实体类，把它一一才拆分，这样可以更好地组织代码，提高代码的可维护性和可扩展性。

3.5 界面获取、修改值实现

1、pageOne.vue组件编写：

<template><div><h1>PageOne</h1><p>请输入您要修改的值</p><input type="text" v-model="msg"><button @click="changed">修改参数值</button><button @click="getData">获取参数值</button></div>
</template><script>export default {data() {return {msg: '默认值'}},methods:{changed(){this.$store.commit('setName',{Name:this.msg})},getData(){let name = this.$store.getters.getName;alert(name);}}}
</script><style>
</style>

注意：

  1. setName是mutations.js导出的属性名
  2. getName是getters.js导出的属性名

效果展示：

2、pageTwo.vue组件编写：

<template><div><h1>PageTwo</h1>{{change}}</div>
</template><script>export default {data() {return {msg: '默认值'}},computed:{change(){return this.$store.getters.getName;}}}
</script><style>
</style>

效果展示：

四、异步处理

4.1 异步改变值

1、src/store/actions.js

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

 2、在pageOne.vue组件添加异步事件

<button @click="Asynchronization">异步改变参数值</button>Asynchronization() {this.$store.dispatch('setNameSync', {name: this.msg})}

效果演示：

4.2 异步发送Ajax到后端

1、后端请求代码编写：

package com.ycxw.ssm.controller;import com.zking.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("模拟异步情况，睡眠6秒，不能超过10秒，axios超时时间设置的是10秒！");Thread.sleep(6000);System.out.println("睡醒了，继续...");} catch (Exception e) {e.printStackTrace();}return new JsonResponseBody<>(resturantName + "-" + date,true,0,null);}
}

2、src/api/action.js 封装请求的地址

  'VUEX': '/vuex/queryVuex'

3、src/store/actions.js 异步发送ajax到后端

  setNameAjax: (context, payload) => {let _this = payload._this;let url = _this.axios.urls.VUEX;let params = {resturantName: payload.Name};_this.axios.post(url, params).then(r => {console.log(r)}).catch(r => {//异常代码console.log(r);});}

4、在pageOne.vue组件添加Ajax异步事件

<button @click="Ajax">异步Ajax改变参数值</button>Ajax() {this.$store.dispatch('setNameAjax', {Name: this.msg,_this: this})}

 十秒异步处理演示：

Tips❕

 Action类似于 mutation，不同在于：

   1. Action提交的是mutation，而不是直接变更状态

   2. Action可以包含任意异步操作

   3. Action的回调函数接收一个 context 上下文参数，注意，这个参数可不一般，它与 store 实例有着相同的方法和属性

注1： VUEX 的 actions 中无法获取到 this 对象

如果要在actions 或者 mutations 中使用this对象，可以在调用的时候把this对象传过去。 

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

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

相关文章

「Qt中文教程指南」如何创建基于Qt Widget的应用程序（二）

「Qt中文教程指南」如何创建基于Qt Widget的应用程序（二）

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 本文描述了如何使用…
阅读更多...
水库大坝除险加固安全监测系统解决方案

水库大坝除险加固安全监测系统解决方案

一、系统背景 为贯彻落实《办公厅关于切实加强水库除险加固和运行管护工作的通知》&#xff08;〔2021〕8号&#xff09;要求&#xff0c;完成“十四五”小型病险水库除险加固、雨水情测报和大坝安全监测设施建设任务&#xff0c;规范项目管理&#xff0c;消除安全隐患&#xf…
阅读更多...
软件培训测试高级工程师多测师肖sir__html之作业11

软件培训测试高级工程师多测师肖sir__html之作业11

html之作业 案例1&#xff1a; 截图&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>表单</title></head><body><table style"background-color:red" bo…
阅读更多...
FPGA project ： flash_erasure

FPGA project ： flash_erasure

SPI是什么&#xff1a; SPI&#xff08;Serial Peripheral Interface&#xff0c;串行外围设备接口&#xff09;通讯协议&#xff0c;是Motorola公司提出的一种同步串行接口技术&#xff0c;是一种高速、全双工、同步通信总线&#xff0c;在芯片中只占用四根管脚用来控制及数据…
阅读更多...
【Vuex+ElementUI】

【Vuex+ElementUI】

一、导言 1、引言 Vuex是一个用于Vue.js应用程序的状态管理模式和库。它建立在Vue.js的响应式系统之上&#xff0c;提供了一种集中管理应用程序状态的方式。使用Vuex&#xff0c;您可以将应用程序的状态存储在一个单一的位置&#xff08;即“存储”&#xff09;中&#xff0c;…
阅读更多...
pytorch中nn.DataParallel多次使用

pytorch中nn.DataParallel多次使用

pytorch中nn.DataParallel多次使用 import torch import torch.nn as nn import torch.optim as optim from torch.utils.data import DataLoader# 定义模型 class MyModel(nn.Module):def __init__(self):super(MyModel, self).__init__()self.fc nn.Linear(10, 1)def forwa…
阅读更多...
GEO生信数据挖掘（六）实践案例——四分类结核病基因数据预处理分析

GEO生信数据挖掘（六）实践案例——四分类结核病基因数据预处理分析

前面五节&#xff0c;我们使用阿尔兹海默症数据做了一个数据预处理案例&#xff0c;包括如下内容&#xff1a; GEO生信数据挖掘&#xff08;一&#xff09;数据集下载和初步观察 GEO生信数据挖掘&#xff08;二&#xff09;下载基因芯片平台文件及注释 GEO生信数据挖掘&…
阅读更多...
NPM- 滚动进度可视化插件

NPM- 滚动进度可视化插件

目录 progress-scroll 滚动进度插件&#x1f4e6; 体验&#x1f30d; 安装&#x1f6f9; 注入&#x1f389; 配置 &#x1f916; 使用方法&#x1f4dd; 使用示例 Demo.vue &#x1f48c; 原理 progress-scroll 滚动进度插件 &#x1f916;&#x1f389;&#x1f389; 您的 进度…
阅读更多...
基于ChatGPT+词向量/词嵌入实现相似商品推荐

基于ChatGPT+词向量/词嵌入实现相似商品推荐

最近一个项目有个业务场景是相似商品推荐&#xff0c;给一个商品描述(比如 WIENER A/B 7IN 5/LB FZN )&#xff0c;系统给出商品库中最相似的TOP 5种商品&#xff0c;这种单纯的推荐系统用词向量就可以实现&#xff0c;不过&#xff0c;这个项目特点是商品库巨大&#xff0c;有…
阅读更多...
Windows环境下下载安装Elasticsearch和Kibana

Windows环境下下载安装Elasticsearch和Kibana

Windows环境下下载安装Elasticsearch和Kibana 首先说明这里选择的版本都是7.17 &#xff0c;为什么不选择新版本&#xff0c;新版本有很多坑&#xff0c;要去踩&#xff0c;就用7就够了。 Elasticsearch下载 Elasticsearch是一个开源的分布式搜索和分析引擎&#xff0c;最初由…
阅读更多...
Qt多工程同名字段自动翻译工具

Qt多工程同名字段自动翻译工具

开发背景 项目里不同工程经常会引用同一批公共类&#xff0c;这些类里如果有字段需要翻译&#xff0c;需要在不同的项目里都翻译一遍&#xff0c;比较麻烦冗余。 特此开发了这个小翻译工具&#xff0c;能读取程序目录下的所有ts文件&#xff0c;以类名归类&#xff0c;不同项目…
阅读更多...
Linux基础指令笔记大全

Linux基础指令笔记大全

Linux基础指令笔记大全 1. ls 指令2. pwd命令3. cd 指令4. touch指令5. mkdir指令6. rmdir指令 && rm 指令7. man指令8.cp指令9. mv指令10. cat 指令11. more指令12. less指令13. head指令14. tail指令15. 时间相关的指令1. **在显示方面&#xff0c;使用者可以设定欲显…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023