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将string类型转换int类型
Dec 09 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
JQuery animate动画应用示例
May 14 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
PHP中ADODB类详解
2008/03/25 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
理解javascript正则表达式
2016/03/08 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
python生成指定长度的随机数密码
2014/01/23 Python
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
社区母亲节活动记录
2014/03/06 职场文书
合伙经营协议书
2014/04/18 职场文书
大三学习计划书范文
2014/05/02 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
护士岗位竞聘书
2015/09/15 职场文书
乔迁新居祝福语
2019/11/04 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL