为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 真正掌握vuex的使用方法（五）

真正掌握vuex的使用方法（五）

标签：
Vue.js vuex

希望每一位同学可以亲自将每行代码进行一次尝试！记得对于学习代码来讲慢慢来才会更快！

f

现在咱们先抛开vuex，一起来做一个如上图一样的切换案例：

<template>
    <div id="app">
        <!--点击此按钮index变为0,并让此按钮应用上样式active-->
       <input type="button" value="vue" :class="{active:index==0}" @click="index=0">
        <!--点击此按钮index变为1,并让此按钮应用上样式active-->
       <input type="button" value="es6" :class="{active:index==1}" @click="index=1">
        <!--点击此按钮index变为2,并让此按钮应用上样式active-->
       <input type="button" value="node" :class="{active:index==2}" @click="index=2">
        <!--当index为0时显示此DIV-->
        <div v-show="index==0">
            <p><a href="https://zhangpeiyue.com/archives/101">利用Vue-cli中的proxyTable解决开发环境的跨域问题</a></p>
            <p><a href="https://zhangpeiyue.com/archives/120">真正掌握vuex的使用方法（一）</a></p>
            <p><a href="https://zhangpeiyue.com/archives/122">真正掌握vuex的使用方法（二）</a></p>
            <p><a href="https://zhangpeiyue.com/archives/126">真正掌握vuex的使用方法（三）</a></p>
            <p><a href="https://zhangpeiyue.com/archives/127">真正掌握vuex的使用方法（四）</a></p>
        </div>
        <!--当index为1时显示此DIV-->
        <div v-show="index==1">
            <p><a href="https://zhangpeiyue.com/archives/92">es6箭头函数的理解及面试题</a></p>
            <p><a href="https://zhangpeiyue.com/archives/88">es6中class类的全方面理解（三）——静态方法</a></p>
            <p><a href="https://zhangpeiyue.com/archives/86">es6中class类的全方面理解（二）——继承</a></p>
            <p><a href="https://zhangpeiyue.com/archives/83">es6中class类的全方面理解（一）</a></p>
            <p><a href="https://zhangpeiyue.com/archives/72">es6中的模块化</a></p>
        </div>
        <!--当index为2时显示此DIV-->
        <div v-show="index==2">
            <p><a href="https://zhangpeiyue.com/archives/118">如何通过node.js对数据进行MD5加密</a></p>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'App',
        data(){
            return {
                //index用于记录当前所选按钮的位置，值会根据点击按钮的不同而变化
                index:0
            }
        }
    }
</script>
<style>
    #app input,#app p{
        margin:5px;
        padding:5px;
    }
    #app input.active{
        background:red;
    }
    #app div{
        border:1px solid red;
    }
</style>

上面的代码并不复杂，相信大家也都可以看的明白。通过以上代码咱们可以实现一个简单的切换，通过这种形式来完成的切换可以称其为乞丐版的切换。因为里面的数据都被写死了！所以咱们可以将代码进行一些优化，将数据单独存放起来进行管理：
首先将所有的数据放到data中：

data(){
    return {
        tagList:[
            {
                tagName:"vue",//按钮的名字
                newList:[//vue新闻的内容列表
                    {
                        newTitle:"利用Vue-cli中的proxyTable解决开发环境的跨域问题",
                        newHref:"https://zhangpeiyue.com/archives/101"
                    },
                    {
                        newTitle:"真正掌握vuex的使用方法（一）",
                        newHref:"https://zhangpeiyue.com/archives/120"
                    },
                    {
                        newTitle:"真正掌握vuex的使用方法（二）",
                        newHref:"https://zhangpeiyue.com/archives/122"
                    },
                    {
                        newTitle:"真正掌握vuex的使用方法（三）",
                        newHref:"https://zhangpeiyue.com/archives/126"
                    },
                    {
                        newTitle:"真正掌握vuex的使用方法（四）",
                        newHref:"https://zhangpeiyue.com/archives/127"
                    }
                ]
            },
            {
                tagName:"es6",//按钮的名字
                newList:[//es6新闻的内容列表
                    {
                        newTitle:"es6箭头函数的理解及面试题",
                        newHref:"https://zhangpeiyue.com/archives/92"
                    },
                    {
                        newTitle:"es6中class类的全方面理解（三）——静态方法",
                        newHref:"https://zhangpeiyue.com/archives/88"
                    },
                    {
                        newTitle:"es6中class类的全方面理解（二）——继承",
                        newHref:"https://zhangpeiyue.com/archives/86"
                    },
                    {
                        newTitle:"es6中class类的全方面理解（一）",
                        newHref:"https://zhangpeiyue.com/archives/83"
                    },
                    {
                        newTitle:"es6中的模块化",
                        newHref:"https://zhangpeiyue.com/archives/72"
                    }
                ]
            },
            {
                tagName:"node",//按钮的名字
                newList:[//node新闻的内容列表
                    {
                        newTitle:"如何通过node.js对数据进行MD5加密",
                        newHref:"https://zhangpeiyue.com/archives/118"
                    }
                ]
            }
        ],
        //index用于记录当前所选按钮的位置，值会根据点击按钮的不同而变化
        index:0
    }
}

然后再将template进行修改

<div id="app">
    <!--对按钮进行遍历-->
   <input type="button" v-for="(item,i) in tagList" :value="item.tagName" :class="{active:i==index}" @click="index=i">
    <!--对新闻进行遍历-->
    <div v-for="(item,i) in tagList" v-show="i==index">
        <p v-for="info in item.newList"><a :href="info.newHref">{{info.newTitle}}</a></p>
    </div>
</div>

最后运行项目，如你所愿，正常运行，一切都是那么美好！
就目前来讲这些数据都已经被单独存放起来了，不过做到这样还远远不够，因为不管是按钮的文字还是新闻的内容正常来讲都是来自于后台人员提供的接口。所以咱们还要继续调整！
首先创建一个server.js，创建一个基于express的node服务来提供接口：

var express=require("express");
var app=express();
app.get("/getTagList",function(req,res){
    res.json([
        {
            tagName:"vue",
            newList:[
                {
                    newTitle:"利用Vue-cli中的proxyTable解决开发环境的跨域问题",
                    newHref:"https://zhangpeiyue.com/archives/101"
                },
                {
                    newTitle:"真正掌握vuex的使用方法（一）",
                    newHref:"https://zhangpeiyue.com/archives/120"
                },
                {
                    newTitle:"真正掌握vuex的使用方法（二）",
                    newHref:"https://zhangpeiyue.com/archives/122"
                },
                {
                    newTitle:"真正掌握vuex的使用方法（三）",
                    newHref:"https://zhangpeiyue.com/archives/126"
                },
                {
                    newTitle:"真正掌握vuex的使用方法（四）",
                    newHref:"https://zhangpeiyue.com/archives/127"
                }
            ]
        },
        {
            tagName:"es6",
            newList:[
                {
                    newTitle:"es6箭头函数的理解及面试题",
                    newHref:"https://zhangpeiyue.com/archives/92"
                },
                {
                    newTitle:"es6中class类的全方面理解（三）——静态方法",
                    newHref:"https://zhangpeiyue.com/archives/88"
                },
                {
                    newTitle:"es6中class类的全方面理解（二）——继承",
                    newHref:"https://zhangpeiyue.com/archives/86"
                },
                {
                    newTitle:"es6中class类的全方面理解（一）",
                    newHref:"https://zhangpeiyue.com/archives/83"
                },
                {
                    newTitle:"es6中的模块化",
                    newHref:"https://zhangpeiyue.com/archives/72"
                }
            ]
        },
        {
            tagName:"node",
            newList:[
                {
                    newTitle:"如何通过node.js对数据进行MD5加密",
                    newHref:"https://zhangpeiyue.com/archives/118"
                }
            ]
        }
    ]);
});
app.listen(80,function(){
    console.log("开启服务成功");
})

node server.js将服务开启。
通过设置proxyTable来解决开发环境中的跨域问题：

proxyTable: {
    "/api":{
        target:"http://127.0.0.1",//访问的服务器地址
        changeOrigin:true,//true为开启代理
        pathRewrite:{
            '^/api': ''//路径的替换规则
        }
    }
},

在App.vue中引入axios：

import axios from "axios";

在mounted周期函数中，通过axios来调用接口，改变tagList的值：

mounted(){
    axios.get("api/getTagList")
        .then(data=>{
            this.tagList=data.data;
        })
}

最后App.vue的内容：

<template>
<div id="app">
    <!--对按钮进行遍历-->
   <input type="button" v-for="(item,i) in tagList" :value="item.tagName" :class="{active:i==index}" @click="index=i">
    <!--对新闻进行遍历-->
    <div v-for="(item,i) in tagList" v-show="i==index">
        <p v-for="info in item.newList"><a :href="info.newHref">{{info.newTitle}}</a></p>
    </div>
</div>
</template>
<script>
    import axios from "axios";
    export default {
        name: 'App',
        data(){
            return {
                tagList:[],
                //index用于记录当前所选按钮的位置，值会根据点击按钮的不同而变化
                index:0
            }
        },
        mounted(){
            axios.get("api/getTagList")
                .then(data=>{
                    this.tagList=data.data;
                })
        }
    }
</script>
<style>
    #app input,#app p{
        margin:5px;
        padding:5px;
    }
    #app input.active{
        background:red;
    }
    #app div{
        border:1px solid red;
    }
</style>

一切都是那么的自然！
如果对node不是特别了解的同学，可以在static文件夹内创建一个名字叫tagList的json文件，用于存储数据值。

[
    {
        "tagName": "vue",
        "newList": [
            {
                "newTitle": "利用Vue-cli中的proxyTable解决开发环境的跨域问题",
                "newHref": "https://zhangpeiyue.com/archives/101"
            },
            {
                "newTitle": "真正掌握vuex的使用方法（一）",
                "newHref": "https://zhangpeiyue.com/archives/120"
            },
            {
                "newTitle": "真正掌握vuex的使用方法（二）",
                "newHref": "https://zhangpeiyue.com/archives/122"
            },
            {
                "newHref": "https://zhangpeiyue.com/archives/126"
            },
            {
                "newTitle": "真正掌握vuex的使用方法（四）",
                "newHref": "https://zhangpeiyue.com/archives/127"
            }
        ]
    },
    {
        "tagName": "es6",
        "newList": [
            {
                "newTitle": "es6箭头函数的理解及面试题",
                "newHref": "https://zhangpeiyue.com/archives/92"
            },
            {
                "newTitle": "es6中class类的全方面理解（三）——静态方法",
                "newHref": "https://zhangpeiyue.com/archives/88"
            },
            {
                "newTitle": "es6中class类的全方面理解（二）——继承",
                "newHref": "https://zhangpeiyue.com/archives/86"
            },
            {
                "newTitle": "es6中class类的全方面理解（一）",
                "newHref": "https://zhangpeiyue.com/archives/83"
            },
            {
                "newTitle": "es6中的模块化",
                "newHref": "https://zhangpeiyue.com/archives/72"
            }
        ]},
    {
        "tagName":"node",
        "newList":[
            {
                "newTitle":"如何通过node.js对数据进行MD5加密",
                "newHref":"https://zhangpeiyue.com/archives/118"
            }
        ]
    }
]

然后将mounted函数中调取的接口地址调整为"/static/tagList.json"即可：

mounted(){
    axios.get("/static/tagList.json")
        .then(data=>{
            this.tagList=data.data;
        })
}

今天就到这里吧，在下篇文章当中将会针对于这个案例咱们采用vuex来实现！

点击查看更多内容
发表于 2019.05.18 20:47， 共 2523 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
1人点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

张培跃

全栈工程师
手记
篇
粉丝
30
获赞与收藏
98

关注作者，订阅最新文章

阅读免费教程

感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消