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

{{}}