坑的背景介紹

要用 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的過程中有什么問題或疑惑，都可以留言或者跟我私信，我是很樂意回答你的，雖然本人也很菜鳥，但可以一起學習一起進步嘛，啊哈哈哈！！！

就醬。

轉載于:https://juejin.im/post/5b0d1aa96fb9a00a0a4d5e9e

總結

以上是生活随笔為你收集整理的Nuxt爬坑系列之vuex的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。