ajax结构图,Vuex结构图及用法

Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex结构图

下图是我总结的Vuex结构图。

bVbugGW?w=1570&h=788

Vuex用法

以一个Vue项目中的商家信息搜索功能为例,记录Vuex的使用。

分析搜索功能的实现:

1、发送ajax请求,得到后台响应的数据,将结果展现在界面上。

2、界面的显示一定是根据数据展示的。

编码流程:

1、写接口函数发送ajax请求;

2、写Vuex;

(1)先写state:先确定要保存一个什么样的状态?发送请求后响应得到的搜索商家列表searchShops: [] 。

searchShops: [] // 搜索商家列表

(2)写mutation-types:

export const RECEIVE_SEARCH_SHOPS = 'receive_search_shops' // 接收搜索的商品数组

(3)写mutations:改变state

[RECEIVE_SEARCH_SHOPS](state, {searchShops}) {

state.searchShops = searchShops

},

(4)写actions:

//异步搜索商家列表

async searchShop({commit, state}, keyword) {

//从state中解构得到经纬度数据

const {latitude, longitude} = state

// 发送异步ajax请求,获取搜索商家列表result

const result = await reqSearchGoods(latitude+','+longitude, keyword)

// 等待异步函数执行完之后,再执行下一行的提交 mutation

// 提交一个 mutation 请求,与 mutations 模块中更新状态的方法名称一致

// commit(更新状态的方法名称,{更新的数据})

// 这里之所以是 result.data 是从api文档查看的

commit(RECEIVE_SEARCH_SHOPS, {searchShops: result.data})

}

3、写组件,组件模板:静态==》动态。

(1)在组件的methods中触发actions

const keyword = this.keyword.trim()

// 分发事件

this.$store.dispatch('searchShop', keyword)

(2)分发事件后,Vuex中就有返回的数据了,此时先去浏览器开发工具的Devtools中的Vuex中查看。

(3)有了数据之后,将数据读取展现在组件中。

3.1)在组件中引入{mapState}

import {mapState} from 'vuex'

3.2)在计算属性中:

computed: {

...mapState(['searchShops'])

},

3.3)取数据到静态组件模板中:

{{}}

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

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

相关文章

安卓设备门禁识别开发_基于android手机的视频通话门禁控制系统

龙源期刊网http://www.qikan.com.cn基于android手机的视频通话门禁控制系统作者:陆海李登辉来源:《科教导刊电子版》2017年第34期摘要如今门禁系统只能在固定的硬件设备进行对讲,智能化水平不高,且不能实现远距离操作,…

qq饥荒联机版服务器没有响应,饥荒联机版专用服务器卡顿原因及解决方法汇总...

饥荒联机版中自己的专用服务器会经常卡顿,那么是什么原因造成的呢?相信很多玩家都不太了解,下面带给大家的是饥荒联机版专用服务器卡顿原因汇总。饥荒联机版专用服务器卡顿原因汇总①猪人兔人鱼人房卡顿等级:高 解决难度:低普通服务器地上同屏可以放20个…

ajax php 返回数组并父子给变量,将字符串变量从PHP发送回数组变量的ajax ...?

我想将一条消息保存在PHP变量中,并用已返回的其他数组变量发回。例如,我在PHP代码中发生了一些错误检查,并想要一个字符串变量,并将特定的消息发送回我的javascript中使用。将字符串变量从PHP发送回数组变量的ajax ...&#xff1f…

类似endnote_求推荐一款文献管理软件?

科研路漫漫,勤勤恳恳查好了文献,辛辛苦苦做完了实验,磕磕绊绊写好了论文……这参考文献怎么回事,怎么插入进去就乱码,引用这些文献还得一个个改格式,中间插入新文献还要一个个调整顺序?这都不是…

服务器系统崩溃文件系统损坏,explorer启动崩溃,提示文件系统错误-2147219200

您好,了解到您在使用时遇到问题。请问您能否进入带网络的安全模式?您可以在锁屏界面长按Shift,同时点击电源-重启,进入WinRE界面,点击疑难解答-高级选项-启动设置-重启,然后按下F5进入带网络的安全模式。然…

react把表格渲染好ui_react 入坑笔记(五) - 条件渲染和列表渲染

条件渲染和列表渲染一、条件渲染条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。贴一个小栗子:function UserGreeting(props) {return 欢迎回来!;}function GuestGreeting…

二进制除法移位相减_verilog移位相减实现除法(转载)

引言除法器在FPGA里怎么实现呢?当然不是让用“/”和“%”实现。在Verilog HDL语言中虽然有除的运算指令,但是除运算符中的除数必须是2的幂,因此无法实现除数为任意整数的除法,很大程度上限制了它的使用领域。并且多数综合工具对于…

python选课系统代码_python模拟选课系统

要求:角色:学校、学员、课程、讲师要求:1. 创建北京、上海 2 所学校2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海开3. 课程包含,周期,价格,通过学校创建课程4. 通过学校创建班级&am…

php验证密码后跳转_php-laravel框架用户验证(Auth)模块解析(四)忘记密码

一、忘记密码模块路由二、控制器解析跟注册、登录的控制器一样,大部分的逻辑使用trait引入。ForgotPasswordController:负责忘记密码页面,以及邮件发送四、扩展开发:自定义的忘记密码行为忘记密码有多种处理方式,这里默…

flume数据丢失与重复_Flume监听文件到kafka,文件通道,kafka消费重复问题

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼#me the components on this agenta1.sources r1a1.sinks k1a1.channels c1# Describe/configure the sourcea1.sources.r1.type execa1.sources.r1.command tail -F /usr/local/test1.txta1.sources.r1.fileHeader truea1.s…

MBSE系统工程是什么

MBSE(基于模型的系统工程)是现代系统工程的最新发展结果。 曾经的产品设计师利用纸笔绘制图版来制作产品和设计,在CAD这类三维建模软件的出现,让工程师们甩掉了图板和图纸,带来的效益大家都能理解。 目前系统工程师们…

python输出箭头代码_python matplotlib 注释文本箭头简单代码示例

注释文本箭头结果展示:完整代码示例:import numpy as npimport matplotlib.pyplot as pltfig,ax plt.subplots(figsize(5,5))ax.set_aspect(1)x1 -1 np.random.randn(100)y1 -1 np.random.randn(100)x2 1. np.random.randn(100)y2 1. np.random…

《数字孪生体技术白皮书》

导读:这几年,数字孪生体的概念炙手可热,越来越成为从工业到产业、从军事到民生各个领域的智慧新代表。数字孪生体实验室与安世亚太联合正式发布了《数字孪生体技术白皮书(2019)》。希望本白皮书能为业内同行提供参考&a…

python换行后开头有缩进_python编码规范(三)--空行,换行,缩进

1.空行空一行:用于类成员函数之间,或者用于区分不同逻辑块空两行:类与类,类与函数,函数与函数之间class Test(object):"""Test class,提供通用的方法"""def __init__(self):""…

数值计算软件有哪些?一款国产软件非常亮眼。

数值计算软件有哪些?一款国产软件非常亮眼。 数学软件由算法标准程序发展而来, 大致形成于70年代初期。随着几大数学软件工程的开展,如美国的NATS工程,人们探索了产生高质量数学软件的方式、方法和技术。 经过长期积累,已有丰富的、涉及广泛数…

linux 删除分区_详解linux系统架构--文件系统体系

概述之前已经对Linux系统架构的内核部分单独做了深入介绍,今天就拿Linux系统架构中的文件系统做一下介绍吧~先介绍下概念:文件系统是文件存放在磁盘等存储设备上的组织方法。Linux系统能支持多种目前流行的文件系统,如EXT2、 EXT3、EXT4、 FA…

什么是数字孪生,为什么对物联网很重要

数字孪生是物理设备的虚拟呈现,数据科学家和IT专业人员可以在开发实际项目之前使用数字孪生技术来模拟运行。数字孪生还改变了物联网、人工智能和数据分析等技术的优化方式。 什么是数字孪生? 数字孪生是指物理世界或系统的虚拟数字化呈现。数字孪生背后…

plsql如何查看mysql库_plsql 如何查看表数据库表

如何使用PLSQL Developer从oracle数据库 导入导出数据如何使用PLSQL Developer从oracle数据库 导入导出数据   用pl/sql developer导出表的数据时有三种方式:Oracle Export,Sql Insert,pl/sql developer   只有“Oracle Export”方式导出…

2020年工业软件的处境是“危”还是“机”?

2020年,工业软件发展所面临的“危机”,如同硬币的两面,在时代强光的照射之下尤其引人注目。硬币的A面首先是“危“。 2020年中,MATLAB等多家国外知名工业软件产品在国内多家机构被禁用,让很多业外人士都关注到了这一系…

GOF设计模式之桥接模式

一、引入 现需要提供能够绘制4种不同颜色且笔画粗细有大中小3种型号的画笔。 方法一:蜡笔 我们需要准备3*412支蜡笔,也就是说必须准备12个具体的蜡笔类 方法二:毛笔 只需要准备三种型号的毛笔,外加四个颜料盒,用347…