Nuxt爬坑系列之vuex

坑的背景介绍

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

图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的过程中有什么问题或疑惑,都可以留言或者跟我私信,我是很乐意回答你的,虽然本人也很菜鸟,但可以一起学习一起进步嘛,啊哈哈哈!!!

就酱。

打赏一个呗

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦