顶部菜单切换通过传递不同参数在同一组件内展示不同内容

图1

开始想着在顶部在每个菜单项写一个组件,然后在不同组件内请求参数。这个问题本可以通过写一个组件然后通过传递动态参数解决,但是由于请求数据一直写在mounted里面,点击上面菜单项不刷新页面导致mounted不能更新而作罢。

后来我想这通过vuex,在vuex 的state里面定义一个参数,如下图所示


在点击dom上面通过 this.$store.state("changeNavId",item),触发vuex里面的changeNavId函数,并且把item传到vuex里面。

此时你需要的数据全部保存在vue里面,那么重点来了,如何从vuex里卖弄获取数据并且动态的请求参数呢!!!

这个时候我想到了vue watch,可以动态的data里面属性值的变化,可是我们需要监听vuex传递过来参数的变化,又该如何做呢,不卖关子了。

我们可以加一个计算属性,watch是可以监听计算属性的。如下图所示


这样就实现了在一个组件内通过监听vuex里面state值的变化传递不同参数从而获取到不同数据

如果大家觉得我谢谢的对你们有所启发,请不要吝啬点个赞吧

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 8,495评论 1 22
  • 序 今年大前端的概念一而再再而三的被提及,那么大前端时代究竟是什么呢?大前端这个词最早是因为在阿里内部有很多前端开...
    一缕殇流化隐半边冰霜阅读 13,842评论 19 92
  • Vue也已经升级到2.0版本了,到现在为止(2016/11/19)比较流行的MVVM框架有AngularJS(也有...
    彬_仔阅读 27,306评论 12 114
  • 说实话我是真不会吵架,所以我从来没有大吵大闹过。看了应老师的简书我知道了,其实也可以有建设性的吵架,也可以越变越恩...
    喵的心灵花园阅读 1,638评论 0 0
  • 对于新的工作环境,她深信自己的放弃安逸,独自一人跑到另一个城市,重新开始的决定,是她人生中第一个正确的决定。 陌生...
    猫肥处作阅读 3,290评论 0 1