vue.js中引入vuex储存接口数据及调用的详细流程
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue.js中引入vuex储存接口数据及调用的详细流程,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2505字,纯文字阅读大概需要4分钟。
内容图文
![vue.js中引入vuex储存接口数据及调用的详细流程](/upload/InfoBanner/zyjiaocheng/340/4cf84827f85b42bfb2d548d6ccdcd87f.jpg)
前言
前几天在慕课网上看到黄轶老师的高仿饿了么app视频教程,在做接口设计的时候,我在想,这个接口能不能储存下来全局调用呢?而不是走很多次接口,管理起来也麻烦。
万能的vue果然有这个功能,那就是vuex。
Vuex 是一个主要应用在中大型单页应用的类似于 Flux 的数据管理架构。它主要帮我们更好地组织代码,以及把应用内的的状态保持在可维护、可理解的状态。
如果你不太理解 Vue.js 应用里的状态是什么意思的话,你可以想象一下你此前写的 Vue 组件里面的 data 字段。Vuex 把状态分成组件内部状态和应用级别状态:
- 组件内部状态:仅在一个组件内使用的状态(data 字段)
- 应用级别状态:多个组件共用的状态
举个例子:比如说有一个父组件,它有两个子组件。这个父组件可以用 props 向子组件传递数据,这条数据通道很好理解。
具体的实现流程,当然是先安装了
npm install vuex --save(推荐使用淘宝镜像cnpm,具体实施请自行百度)
然后建立个store.js的文件来管理数据
里面的内容是这样的
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state:{ }, actions:{ }, mutations:{ } })
然后在main.js里面引入这个js文件
import store from './store.js'
然后就开始请求数据了,在mutations这个属性里写上
mutations:{ getJson(){ Vue.http.get('../data.json',{ },{ headers:{}, emulateJSON:true }).then(response=>{ this.state.newslist=response.data; },response=>{ }) } }
在这里写这样写是为了让actions调然后把数据存在state里面的,官网说这个是异步存数据,我理解的这个异步就跟ajax的异步加载一个意思,当然同步就是mutations了。但是异步的数据先写在mutations里面然后才能调用,所以就得在actions里面这样写
actions:{ newJson(obj){ obj.commit('getJson'); } },
然后把把state写成这样
state:{ newslist:[] },
这么写的目的是为了不报错,免得出现什么找不到之类的错误。
上面的newJson跟obj是我自定义的,你可以随便写,getJson就是mutations里面你要用的方法,方便等会分流用,这个getJson方法也可以加参数的,但参数必须是state,这个state就是上面state,不是自定义的。写死。
接下来在你的子组件里面就可以分流啦!
子组件里的代码是这样的:
import {mapState} from 'vuex'; computed:{ ...mapState({ goods:state=>state.newslist.goods, classMap:state=>state.classMap }) }
在这里我自定义了个goods来代替state.newslist.goods,因为我的数据是
{ "goods":[] }
这种格式,我嫌长,就缩短了下。
然后在html里面就可以直接调用了,这里贴一小块代码
<ul> <li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)"> <span class="text border-1px"> <span class="icon" v-show="item.type>0"> </span> {{item.name}} </span> </li> </ul>
基本上流程就是这样
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
内容总结
以上是互联网集市为您收集整理的vue.js中引入vuex储存接口数据及调用的详细流程全部内容,希望文章能够帮你解决vue.js中引入vuex储存接口数据及调用的详细流程所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。