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

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

Vuex结构图

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

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)取数据到静态组件模板中:

{{}}

ajax结构图,Vuex结构图及用法相关推荐

Vue--- VueX基础（Vuex结构图数据流向）1.1
Vuex基础 https://vuex.vuejs.org/zh-cn state --> view --> action -> state 多组件共享状态, 之前操作方式,由父组件 ...
在vue中 storge 和vuex使用的用法区别
在vue中 storge 和vuex使用的用法区别 1.联动性:storge对于属性的改变不能触发其他页面的改动 storage: 存取login之后就不会改变的信息,比如userId, isAdmi ...
vue之mapMutaions的使用 vuex中 action 用法示例 api.js的使用
vue之mapMutations的使用我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...
Ajax Toolkit AutoComplete 几种用法
AutoComplete控件是微软提供的 AJAX Control Toolkit 控件,是用来实现类似google 自动匹配和完成效果. AutoComplete控件的用法很简单,只需要页面一个Te ...
Asp.net Ajax AutoComplete 控件的用法
AutoComplete控件是微软提供的ASP.NET AJAX Control Toolkit 中的一个控件,是用来实现类似百度搜索的自动完成效果. AutoComplete控件的用法很简单,只要在 ...
ajax complete写法,JQuery ajaxComplete()用法及代码示例
ajaxComplete()方法用于指定AJAX请求完成时要运行的功能. 用法: $(document).ajaxComplete(function(event, xhr, options)) 参数: ...
vuex ajax dev,vuex中使用ajax的话如何维护状态？
例如,我在初始化状态的时候,在action里面写了一个函数异步去获取初始化数据然后初始化vuex的状态,但是这样子的话我在组件里面就获取不了这个状态了,代码: actions export const ...
Vuex的全面用法总结
1. vuex简介 vuex是专门用来管理vue.js应用程序中状态的一个插件.他的作用是将应用中的所有状态都放在一起,集中式来管理.需要声明的是,这里所说的状态指的是vue组件中data里面的属性. ...
Ajax — cropper (图片剪裁)基本用法
jQuery-cropper插件完整的API:http://www.jq22.com/jquery-info9322 1. 基本使用步骤在 <head> 中导入 cropper.css ...

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

ajax结构图,Vuex结构图及用法相关推荐

最新文章

热门文章