Vuex结构图及用法

2019-06-24 admin

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

Vuex结构图

下图是我总结的Vuex结构图。 clipboard.png

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

{{}}

[转载]原文链接:https://segmentfault.com/a/1190000019567957

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-68091.html

文章标题:Vuex结构图及用法

相关文章
JavaScript获取本周周一,周末及获取任意时间的周一周末功能示例
本文实例讲述了JS获取本周周一,周末及获取任意时间的周一周末功能。分享给大家供大家参考,具体如下: 项目需要获取本周及任意一天的周一及周末 需格式化,示例代码如下: <!DOCTYPE html PUBLIC "-&#x2F...
2017-03-17
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
借助于 XMLHttpRequest,浏览器可以在整个页面不刷新的情况下与服务端进行交互,这就是所谓的 Ajax(Asynchronous JavaScript and XML)。Ajax 可以为用户提供更为丰富的用户体验。 Ajax 请求...
2017-03-29
基于javascript实现单选及多选的向右和向左移动实例
本文实例讲述了基于javascript实现单选及多选的向右和向左移动实例。分享给大家供大家参考。具体实现方法如下: 方法 一: <body> <h1>实现单选及多选的向右和向左移动</h1> &...
2017-03-27
angular.js 路由及页面传参示例
页面传参数方法:1、$rootScope。2、(url)/user/:name/:age。 页面转换方法:1、href="#/" rel=“external nofollow” rel=“external nofollo...
2017-03-15
使用canvas及js简单生成验证码方法
在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是: 1.生成一张画布canvas 2.生成随机数验证码  3.在画布中生成干扰线  4.把验证码文本填充到画布中  5.点击画布更换验证码 结构...
2017-04-05
JavaScript实现DIV层拖动及动态增加新层的方法
本文实例讲述了JavaScript实现DIV层拖动及动态增加新层的方法。分享给大家供大家参考。具体分析如下: 无刷新添加一个新的DIV层,并可实现的该层的拖动,鼠标拖动层可移动位置,将JS部分另存为一个新文件,用到的时候从外部引入,这个拖动...
2017-03-23
JavaScript中String.prototype用法实例
本文实例讲述了JavaScript中String.prototype用法。分享给大家供大家参考。具体如下: // 返回字符的长度,一个中文算2个 String.prototype.ChineseLength=functi...
2017-03-23
nodejs的压缩文件模块archiver用法示例
本文实例讲述了nodejs的压缩文件模块archiver用法。分享给大家供大家参考,具体如下: 发现了个更好用的 zip-local https://www.npmjs.com/package/zip-local var zipper = ...
2017-03-06
JavaScript使用pop方法移除数组最后一个元素用法实例
本文实例讲述了JavaScript使用pop方法移除数组最后一个元素的用法。分享给大家供大家参考。具体如下: 下面的代码演示了JS数组的pop方法,可以用来移除数组的最后一个元素,实际上就是把数组当成堆栈使用 <!DOCTYPE ht...
2017-03-22
js简单工厂模式用法实例
本文实例讲述了js简单工厂模式用法。分享给大家供大家参考。具体实现方法如下: <!DOCTYPE html> <html> <head> <title>简单工厂模式</titl...
2017-03-27
回到顶部