vue.js中引入vuex储存接口数据及调用的详细流程

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

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

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

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

举个例子：比如说有一个父组件，它有两个子组件。这个父组件可以用 props 向子组件传递数据，这条数据通道很好理解。

rush:bash;"> npm install vuex --save（推荐使用淘宝镜像cnpm，具体实施请自行百度）

然后建立个store.js的文件来管理数据

里面的内容是这样的

rush:js;"> import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state:{ },actions:{ },mutations:{ } })

然后在main.js里面引入这个js文件

rush:js;"> import store from './store.js'

然后就开始请求数据了，在mutations这个属性里写上

{ this.state.newslist=response.data; },response=>{

})

}
}

在这里写这样写是为了让actions调然后把数据存在state里面的，官网说这个是异步存数据，我理解的这个异步就跟ajax的异步加载一个意思，当然同步就是mutations了。但是异步的数据先写在mutations里面然后才能调用，所以就得在actions里面这样写

rush:js;"> actions:{ newJson(obj){ obj.commit('getJson'); } },

然后把把state写成这样

rush:js;"> state:{ newslist:[] },

这么写的目的是为了不报错，免得出现什么找不到之类的错误。

上面的newJson跟obj是我自定义的，你可以随便写，getJson就是mutations里面你要用的方法，方便等会分流用,这个getJson方法也可以加参数的，但参数必须是state，这个state就是上面state，不是自定义的。写死。

子组件里的代码是这样的：

state.newslist.goods,classMap:state=>state.classMap }) }

在这里我自定义了个goods来代替state.newslist.goods，因为我的数据是

rush:js;"> { "goods":[] }

这种格式，我嫌长，就缩短了下。

然后在html里面就可以直接调用了，这里贴一小块代码

rush:xhtml;">

基本上流程就是这样

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