搜索
首页web前端js教程在vue.js中如何调用vuex储存接口数据
在vue.js中如何调用vuex储存接口数据Jun 20, 2018 pm 05:15 PM
vuevue.jsvuejsvuex教程调用接口

这篇文章主要给大家介绍了关于在vue.js中引入vuex储存接口数据及调用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。

前言

前几天在慕课网上看到黄轶老师的高仿饿了么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="{&#39;current&#39;: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>

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

使用React如何防止出现重复渲染

在vue中如何实现directive功能

在nodejs中基于mssql模块如何实现封装

在Javascript中如何实现bind

在js中如何实现二级联动

以上是在vue.js中如何调用vuex储存接口数据的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Flask + Vue.js:快速实现单页面应用Flask + Vue.js:快速实现单页面应用Jun 17, 2023 am 09:06 AM

随着移动互联网和Web技术的迅速发展,越来越多的应用需要提供流畅、快速的用户体验。传统的多页面应用已经无法满足这些需求,而单页面应用(SPA)则成为了解决方案之一。那么,如何快速实现单页面应用呢?本文将介绍如何利用Flask和Vue.js来构建SPA。Flask是一个使用Python语言编写的轻量级Web应用框架,它的优点是灵活、易扩

VUE3快速入门:使用Vue.js指令实现选项卡切换VUE3快速入门:使用Vue.js指令实现选项卡切换Jun 15, 2023 pm 11:45 PM

本文旨在帮助初学者快速入手Vue.js3,实现简单的选项卡切换效果。Vue.js是一个流行的JavaScript框架,可用于构建可重用的组件、轻松管理应用程序的状态和处理用户界面的交互操作。Vue.js3是该框架的最新版本,相较于之前的版本变动较大,但基本原理并未改变。在本文中,我们将使用Vue.js指令实现选项卡切换效果,目的是让读者熟悉Vue.js的

VUE3基础教程:使用Vue.js插件封装图片上传组件VUE3基础教程:使用Vue.js插件封装图片上传组件Jun 15, 2023 pm 11:07 PM

VUE3基础教程:使用Vue.js插件封装图片上传组件Vue.js是一款流行的前端框架,它使开发者可以用更少的代码创建更高效、灵活的应用程序。尤其是在Vue.js3发布之后,它的优化和改进使得更多的开发者倾向于使用它。这篇文章将介绍如何使用Vue.js3来封装一个图片上传组件插件。在开始之前,需要先确保已经安装了Vue.js和VueCLI。如果尚未安装

VUE3基础教程:使用Vue.js插件封装日历组件VUE3基础教程:使用Vue.js插件封装日历组件Jun 15, 2023 pm 09:09 PM

Vue.js是现代化的前端JavaScript框架之一,它提供了一套完整的工具来构建交互式用户界面。在Vue.js的生态系统中,有各种各样的插件和组件,可以大大简化我们的开发流程。在本篇文章中,我们将介绍如何使用Vue.js插件封装一个日历组件,以方便我们在Vue.js项目中快速使用。Vue.js插件Vue.js插件可以扩展Vue.js的功能。它们可以添加全

Vue.js实现登录验证的完整指南(API、JWT、axios)Vue.js实现登录验证的完整指南(API、JWT、axios)Jun 09, 2023 pm 04:04 PM

Vue.js是一种流行的JavaScript框架,用于构建动态Web应用程序。实现用户登录验证是开发Web应用程序的必要部分之一。本文将介绍使用Vue.js、API、JWT和axios实现登录验证的完整指南。创建Vue.js应用程序首先,我们需要创建一个新的Vue.js应用程序。我们可以使用VueCLI或手动创建一个Vue.js应用程序。安装axiosax

VUE3开发入门教程:使用Vue.js组件封装chart图表VUE3开发入门教程:使用Vue.js组件封装chart图表Jun 15, 2023 pm 10:29 PM

随着大数据时代的到来,数据可视化已经成为了现如今的趋势之一。在Web前端开发的过程中,如何使用Vue.js进行数据可视化处理,成为了许多前端开发者所关注的问题。本文将会介绍如何使用Vue.js组件,封装基于chart.js库的图表。1.了解chart.jsChart.js是一款基于HTML5CanvasElement的简单易用、跨平台的开源图表库,我们可

VUE3基础教程:使用Vue.js自定义事件VUE3基础教程:使用Vue.js自定义事件Jun 15, 2023 pm 09:43 PM

Vue.js是一款流行的JavaScript框架,它提供了很多方便的特性,所以它在开发Web应用程序时非常有用。Vue.js中的自定义事件系统使其更加灵活,并且可以通过组件事件触发和处理来实现更好的代码重用性。在本文中,我们将讨论如何使用Vue.js的自定义事件。Vue.js中自定义事件的基础在Vue.js中,我们可以通过v-on指令来监听DOM事件。例如,

使用Python与Vue.js开发实时同步的Web应用程序使用Python与Vue.js开发实时同步的Web应用程序Jun 17, 2023 am 08:28 AM

随着Web应用程序的普及和用户体验的要求不断提高,实时同步已经成为了现代Web应用程序不可或缺的功能。在本文中,我们将介绍如何使用Python和Vue.js开发实时同步的Web应用程序。为了实现实时同步的功能,我们需要使用一些现代化的Web技术,其中包括WebSocket、异步编程和前端框架。以下是本文中将用到的技术栈:Python3.6+FlaskFla

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!