Vuex结构图及用法

2019年9月16日 150次阅读来源: MandyShen

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

`Vuex`结构图

下图是我总结的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)取数据到静态组件模板中:

{{}}

    原文作者：MandyShen
    原文地址: https://segmentfault.com/a/1190000019567957
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

Vuex结构图

Vuex用法