为了账号安全,请及时绑定邮箱和手机立即绑定

Nuxt爬坑系列之vuex

标签:
Vue.js

坑的背景介绍

要用 bootstrap-vue 这个vue的ui框架来重构公司的官网,因为公司官网之前使用bootstrap搭建的,现在想用nuxt框架来重构,恰好bootstrap出了结合vue的版本,故此毫不犹豫选择了bootstrap-vue这个ui框架,在做到导航部分(如图1)的时候,问题出现了,无法动态切换active,即那个蓝色的背景

https://img1.sycdn.imooc.com//5d53cac60001c12806910118.jpg

图1

部分代码如下

<b-navbar-nav class="ml-auto">
    <b-nav-item class="active"  href="/">首页</b-nav-item>
    <b-nav-item  href="/companyProfile">企业概况</b-nav-item>
    <b-nav-item  href="/news">新闻中心</b-nav-item>
    <b-nav-item  href="/productShow">产品展示</b-nav-item>
    <b-nav-item  href="/healthy">肽与健康</b-nav-item>
    <b-nav-item  href="/contact">联系我们</b-nav-item></b-navbar-nav>

后来想到的办法是设置一个变量show的值,当show等于1,则在首页的部分添加class="active",同理show=2时,在企业概况的部分添加class="active",代码如下

<b-navbar-nav class="ml-auto">
    <b-nav-item :class="{active:show==1}" @click="selectIndex()" href="/">首页</b-nav-item>
    <b-nav-item :class="{active:show==2}" @click="selectCompanyProfile()" href="/companyProfile">企业概况</b-nav-item>
    <b-nav-item :class="{active:show==3}" @click="selectNews()" href="/news">新闻中心</b-nav-item>
    <b-nav-item :class="{active:show==4}" @click="selectProductShow()" href="/productShow">产品展示</b-nav-item>
    <b-nav-item :class="{active:show==5}" @click="selectHealthy()" href="/healthy">肽与健康</b-nav-item>
    <b-nav-item :class="{active:show==6}" @click="selectContact()" href="/contact">联系我们</b-nav-item></b-navbar-nav>export default {
    data(){
      return{
        show:1
      }
    },
    
    methods:{
      selectIndex(){
        this.show = 1
      },
    selectCompanyProfile(){
        this.show = 2
      },
      //等等,不一一写了
    }
}

然而并未实现想像中动态添加的active的效果,原因是页面发生了跳转,重载了这个导航组件,所以show会一直是1,active永远在首页上。那么在当前页面上进行改变show的值就失败了,故此引入今天要说的嘉宾---Vuex

在nuxt中使用vuex跟传统在vue中使用vuex还不太一样,首先nuxt已经集成了vuex,不需要我们进行二次安装,直接引用就好,在默认nuxt的框架模板下有一个store的文件夹,就是我们用来存放vuex的地方

Nuxt.js 支持两种使用 store 的方式:

普通方式:store/index.js 返回一个 Vuex.Store 实例
模块方式:store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 (当然,index 是根模块,相当于设置了namespaced: true)

Nuxt.js提供了模块方式的简单写法:使用状态树模块化的方式,store/index.js 不需要返回 Vuex.Store 实例,直接将 state、mutations 和 actions 暴露出来即可。

我写的项目红没有把state暴露出来,当然,你们可以暴露来,我在store文件夹下创建了3个文件,分别是index.js,mutations.js和actions.js,其中index.js的内容是

import Vuex from 'vuex'import mutations from './mutations'import actions from './actions'export default () => {  return new Vuex.Store({    state: {      show: 1
    },
    mutations,
    actions
  })
}

mutations.js的内容是

export default {
    selectIndex(state) {
        state.show = 1
    },
    selectCompanyProfile(state) {
        state.show = 2
    },
    selectNews(state) {
        state.show = 3
    },
    selectProductShow(state) {
        state.show = 4
    },
    selectHealthy(state) {
        state.show = 5
    },
    selectContact(state) {
        state.show = 6
    }
}

在导航的部分我没有涉及到action的操作,故此action的内容暂不做展示。

在index.js的部分我设置了show的默认值为1,mutations.js的部分我写了很多等待调用的方法。

下面vue的页面要获取vuex存储的show的值,并调用方法,代码为

<b-navbar-nav class="ml-auto">
    <b-nav-item :class="{active:$store.state.show==1}" @click="selectIndex()">首页</b-nav-item>
    <b-nav-item :class="{active:$store.state.show==2}" @click="selectCompanyProfile()" >企业概况</b-nav-item>
    <b-nav-item :class="{active:$store.state.show==3}" @click="selectNews()">新闻中心</b-nav-item>
    <b-nav-item :class="{active:$store.state.show==4}" @click="selectProductShow()">产品展示</b-nav-item>
    <b-nav-item :class="{active:$store.state.show==5}" @click="selectHealthy()">肽与健康</b-nav-item>
    <b-nav-item :class="{active:$store.state.show==6}" @click="selectContact()">联我们</b-nav-item>
      
</b-navbar-nav>

  import {mapState, mapMutations} from 'vuex'
  export default {    data(){      return{
        
      }
    },
    methods:{
      // 导航切换      selectIndex(){
        this.$store.commit('selectIndex')
        this.$router.push('/')
      },      selectCompanyProfile(){
        this.$store.commit('selectCompanyProfile')
        this.$router.push('/companyProfile')
      },      selectNews(){
        this.$store.commit('selectNews')
        this.$router.push('/news')
      },      selectProductShow(){
        this.$store.commit('selectProductShow')
        this.$router.push('/productShow')
      },      selectHealthy(){
        this.$store.commit('selectHealthy')
        this.$router.push('/healthy')
      },      selectContact(){
        this.$store.commit('selectContact')
        this.$router.push('/contact')
      },
      // 导航切换部分结束
      
    }
  }

不知道大家注意到没有我把之前的 href 链接给去掉了,而是换成了点击事件,因为如果我依然用 href 链接,并且click方法里面直接调用

this.$store.commit('selectIndex')

当我点击企业概况,正常情况下页面发生跳转,且show的值变为2,蓝色背景也转移到企业概况上去,但事实上页面发生跳转时,vuex里show的值会先变成2然后又变回1,页面跳转了,但active依然没有添加对,当我去掉 href 后,改用click点击跳转就成功了,这个大家可以尝试一下,具体原因我也不太清除,如果有大神知道恳请告知。

反正利用vuex来达到导航栏active的切换跌跌撞撞一上午总算从坑里爬出来了,大家也应该能看的出来啊,我的语言组织能力不是很好,但我真的用力在把我的爬坑过程给大家介绍一下,二来也是记录一下我码代码的这么一个过程,我是很喜欢交朋友的,如果你对于这篇文章看不太懂,如果你目前在学习nuxt或者vue的过程中有什么问题或疑惑,都可以留言或者跟我私信,我是很乐意回答你的,虽然本人也很菜鸟,但可以一起学习一起进步嘛,啊哈哈哈!!!

就酱。



作者:行走的巨象
链接:https://www.jianshu.com/p/cb61c61f88c0


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

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

举报

0/150
提交
取消