h5在线编辑_秀堂h5_手机ui设计_答题类h5_h5测试小游戏
当前位置:建站首页 > 新闻资讯 > 网站建设 >

微信小程序营销版_vue.js中引入vuex储存接口数据及

发表日期:2021-01-11 11:17文章编辑:jianzhan浏览次数: 标签:    

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

前言

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

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

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

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

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

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

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

npm install vuex --save(pm,具体实施请自行百度)

然后建立个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){
 mit('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里面就可以直接调用了,这里贴一小块代码

 li v-for="(item,index) in goods" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)" 
 span 
 span v-show="item.type 0" 
 /span 
 {{item.name}}
 /span 
 /li 
 /ul 

基本上流程就是这样

总结

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


返回列表
相关新闻