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 相关文章推荐
Javascript 去除数组的重复元素
May 04 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
javascript实现微信分享
Dec 23 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
微信小程序之数据绑定原理解析
Aug 14 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
php 获取select下拉列表框的值
2010/05/08 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
基于empty函数的输出详解
2013/06/17 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
php 类自动载入的方法
2015/06/03 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
Linux机考试题
2015/07/17 面试题
2014年教师学期工作总结
2014/11/08 职场文书
幼儿园教师教学反思
2016/03/02 职场文书