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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
javascript封装简单实现方法
Aug 11 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
JS中Array数组学习总结
Jan 18 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 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
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
PHP积分兑换接口实例
2015/02/09 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
js身份证验证超强脚本
2008/10/26 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
js 走马灯简单实例
2013/11/21 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
决策树的python实现方法
2014/11/18 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
Python中is和==的区别详解
2018/11/15 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
详解Python的三种可变参数
2019/05/08 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
python中Lambda表达式详解
2019/11/20 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
营业员实习自我鉴定
2013/12/07 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
趣味比赛活动方案
2014/02/15 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
Golang 实现WebSockets
2022/04/24 Golang