[聚合文章] vue.js引入vuex储存接口数据并调用的流程

前几天在慕课网上看到黄轶老师的高仿饿了么app视频教程，在做接口设计的时候，我在想，这个接口能不能储存下来全局调用呢？而不是走很多次接口，管理起来也麻烦。
万能的vue果然有这个功能，那就是vuex。
具体的实现流程，当然是先安装了

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="{'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>

基本上流程就是这样，有啥不明白的欢迎评论交流！

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。