坑的背景介绍
要用 bootstrap-vue 这个vue的ui框架来重构公司的官网，因为公司官网之前使用bootstrap搭建的，现在想用nuxt框架来重构，恰好bootstrap出了结合vue的版本，故此毫不犹豫选择了bootstrap-vue这个ui框架，在做到导航部分（如图1）的时候，问题出现了，无法动态切换active，即那个蓝色的背景
部分代码如下
<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的过程中有什么问题或疑惑，都可以留言或者跟我私信，我是很乐意回答你的，虽然本人也很菜鸟，但可以一起学习一起进步嘛，啊哈哈哈！！！
就酱。
