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

就酱。

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