Vue（七）整合vue-router&Vuex&Axios

时间:2019-06-18
本文章向大家介绍Vue（七）整合vue-router&Vuex&Axios，主要包括Vue（七）整合vue-router&Vuex&Axios使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

整合vue-router&Vuex

先创建工程

vue create vue-axios

然后选择

勾选

回车，出现是否使用history mode？选择y，代表URL地址里面不会出现#。选择n，代表URL里面带有#。这里我们选择n，看自己需要了。

回车，出现ESLint，直接选第一个即可

回车，勾选默认

回车，选择把配置放在package.json文件里

回车，最后一个选项，问你是否要存储当前的配置，以便以后用同样的配置。你根据需要选择即可。

回车之后开始安装了。

整合Axios

 你可以进入工程目录执行以下命令，或者用WebStorm打开后，在Terminal里执行以下命令来安装Axios。

$ npm install axios

测试运行

先看一下工程目录结构

然后修改文件 main.js

加入

import Axios from 'axios'   // 引入Axios

Vue.prototype.$axios = Axios;    // 全局变量

再修改 About.vue，内容如下（由于懒得写接口测试了，直接调用的墨迹天气，然后由于跨域问题，无法访问，所以我把catch块中写了死数据）

<template>
  <div class="about">
    <table style="width: 300px;margin: 0 auto;">
        <tbody>
        <tr v-for="w in dataList.hour24" :key="w.Fpredict_hour">
            <td>{{w.Fpredict_date}}</td>
            <td>{{w.Fpredict_hour}}点</td>
            <td>{{w.Fcondition}}</td>
        </tr>
        <tr>
            <td colspan="3">一共{{totalCount}}条数据</td>
        </tr>
        </tbody>
    </table>
  </div>
</template>
<script>
    export default {
        name: 'about',
        data: ()=> ({
            dataList: {},
            totalCount: 0
        }),
        mounted: function () {
            let me = this;
            me.getDataForTable()
                .then(data => {
                    me.dataList = data.data
                    me.totalCount = data.count
                })
        },
        methods: {
            getDataForTable () {
                let me = this;
                return new Promise((resolve, reject) => {
                    // 额外的参数，比如headers
                    // let options = {
                    //     headers: {
                    //         'token': '00000'
                    //     }
                    // }
                    // 参数
                    let params = {};
                    me.$axios.post('http://tianqi.moji.com/index/getHour24',params/*,options*/)
                        // 请求成功后
                        .then(function (response) {
                            let data = response.data;
                            let count = data.hour24.length
                            resolve({
                                data,
                                count
                            })
                        })
                        // 请求失败处理
                        .catch(function (error) {
                            console.log(error);
                            let data = {
                                "hour24": [
                                    {
                                        "Fpredict_date": "2019-06-18",
                                        "Ficon_id": 2,
                                        "Fcondition_id": 13,
                                        "Ftemp": 28,
                                        "Fwspd": 16.92,
                                        "Fwind_dir_id": 8,
                                        "Ffeelslike": 40,
                                        "Fpredict_hour": 12,
                                        "Fhumidity": 89,
                                        "id": 892,
                                        "wind_degrees": "135",
                                        "Fcondition": "阴",
                                        "Fwdir": "SSE",
                                        "wind_level": 3
                                    },
                                    {
                                        "Fpredict_date": "2019-06-18",
                                        "Ficon_id": 2,
                                        "Fcondition_id": 13,
                                        "Ftemp": 28,
                                        "Fwspd": 18.72,
                                        "Fwind_dir_id": 9,
                                        "Ffeelslike": 40,
                                        "Fpredict_hour": 13,
                                        "Fhumidity": 88,
                                        "id": 892,
                                        "wind_degrees": "180",
                                        "Fcondition": "阴",
                                        "Fwdir": "S",
                                        "wind_level": 3
                                    },
                                    {
                                        "Fpredict_date": "2019-06-18",
                                        "Ficon_id": 2,
                                        "Fcondition_id": 13,
                                        "Ftemp": 28,
                                        "Fwspd": 20.88,
                                        "Fwind_dir_id": 9,
                                        "Ffeelslike": 36,
                                        "Fpredict_hour": 14,
                                        "Fhumidity": 75,
                                        "id": 892,
                                        "wind_degrees": "180",
                                        "Fcondition": "阴",
                                        "Fwdir": "S",
                                        "wind_level": 4
                                    },
                                    {
                                        "Fpredict_date": "2019-06-18",
                                        "Ficon_id": 2,
                                        "Fcondition_id": 13,
                                        "Ftemp": 28,
                                        "Fwspd": 19.8,
                                        "Fwind_dir_id": 9,
                                        "Ffeelslike": 37,
                                        "Fpredict_hour": 15,
                                        "Fhumidity": 76,
                                        "id": 892,
                                        "wind_degrees": "180",
                                        "Fcondition": "阴",
                                        "Fwdir": "S",
                                        "wind_level": 0
                                    },
                                    {
                                        "Fpredict_date": "2019-06-18",
                                        "Ficon_id": 2,
                                        "Fcondition_id": 13,
                                        "Ftemp": 28,
                                        "Fwspd": 18.72,
                                        "Fwind_dir_id": 9,
                                        "Ffeelslike": 37,
                                        "Fpredict_hour": 16,
                                        "Fhumidity": 76,
                                        "id": 892,
                                        "wind_degrees": "180",
                                        "Fcondition": "阴",
                                        "Fwdir": "S",
                                        "wind_level": 3
                                    },
                                    {
                                        "Fpredict_date": "2019-06-18",
                                        "Ficon_id": 2,
                                        "Fcondition_id": 13,
                                        "Ftemp": 27,
                                        "Fwspd": 17.28,
                                        "Fwind_dir_id": 9,
                                        "Ffeelslike": 35,
                                        "Fpredict_hour": 17,
                                        "Fhumidity": 80,
                                        "id": 892,
                                        "wind_degrees": "180",
                                        "Fcondition": "阴",
                                        "Fwdir": "S",
                                        "wind_level": 3
                                    },
                                    {
                                        "Fpredict_date": "2019-06-18",
                                        "Ficon_id": 2,
                                        "Fcondition_id": 13,
                                        "Ftemp": 27,
                                        "Fwspd": 16.2,
                                        "Fwind_dir_id": 9,
                                        "Ffeelslike": 35,
                                        "Fpredict_hour": 18,
                                        "Fhumidity": 81,
                                        "id": 892,
                                        "wind_degrees": "180",
                                        "Fcondition": "阴",
                                        "Fwdir": "S",
                                        "wind_level": 3
                                    },
                                    {
                                        "Fpredict_date": "2019-06-18",
                                        "Ficon_id": 2,
                                        "Fcondition_id": 13,
                                        "Ftemp": 27,
                                        "Fwspd": 14.76,
                                        "Fwind_dir_id": 9,
                                        "Ffeelslike": 35,
                                        "Fpredict_hour": 19,
                                        "Fhumidity": 83,
                                        "id"

原文地址：https://www.cnblogs.com/LUA123/p/10951207.html

随机文章
Javascript知识点必读
最近更新