vue.js中引入vuex储存接口数据及调用的详细流程


Posted in Javascript onDecember 14, 2017

前言

前几天在慕课网上看到黄轶老师的高仿饿了么app视频教程,在做接口设计的时候,我在想,这个接口能不能储存下来全局调用呢?而不是走很多次接口,管理起来也麻烦。

万能的vue果然有这个功能,那就是vuex。

Vuex 是一个主要应用在中大型单页应用的类似于 Flux 的数据管理架构。它主要帮我们更好地组织代码,以及把应用内的的状态保持在可维护、可理解的状态。

如果你不太理解 Vue.js 应用里的状态是什么意思的话,你可以想象一下你此前写的 Vue 组件里面的 data 字段。Vuex 把状态分成组件内部状态和应用级别状态:

  • 组件内部状态:仅在一个组件内使用的状态(data 字段)
  • 应用级别状态:多个组件共用的状态

举个例子:比如说有一个父组件,它有两个子组件。这个父组件可以用 props 向子组件传递数据,这条数据通道很好理解。

具体的实现流程,当然是先安装了

npm install vuex --save(推荐使用淘宝镜像cnpm,具体实施请自行百度)

然后建立个store.js的文件来管理数据

vue.js中引入vuex储存接口数据及调用的详细流程

里面的内容是这样的

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>

基本上流程就是这样

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
ext 代码生成器
Aug 07 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
Javascript类型判断相关例题及解析
Aug 26 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 #Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 #Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 #Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 #Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 #jQuery
原生js实现简单的焦点图效果实例
Dec 14 #Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 #Javascript
You might like
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
php防止sql注入的方法详解
2017/02/20 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
澳大利亚相机之家:Camera House
2017/11/30 全球购物
专科毕业生自我鉴定
2013/12/01 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
2014年底个人工作总结
2015/03/10 职场文书
甲午风云观后感
2015/06/02 职场文书
开学典礼致辞
2015/07/29 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
浅谈MySQL之select优化方案
2021/08/07 MySQL