坑的背景介紹

要用 bootstrap-vue 這個vue的ui框架來重構(gòu)公司的官網(wǎng)，因?yàn)楣竟倬W(wǎng)之前使用bootstrap搭建的，現(xiàn)在想用nuxt框架來重構(gòu)，恰好bootstrap出了結(jié)合vue的版本，故此毫不猶豫選擇了bootstrap-vue這個ui框架，在做到導(dǎo)航部分（如圖1）的時候，問題出現(xiàn)了，無法動態(tài)切換active，即那個藍(lán)色的背景

部分代碼如下

<b-navbar-nav class="ml-auto"><b-nav-item class="active" href="/">首頁</b-nav-item><b-nav-item href="/companyProfile">企業(yè)概況</b-nav-item><b-nav-item href="/news">新聞中心</b-nav-item><b-nav-item href="/productShow">產(chǎn)品展示</b-nav-item><b-nav-item href="/healthy">肽與健康</b-nav-item><b-nav-item href="/contact">聯(lián)系我們</b-nav-item> </b-navbar-nav> 復(fù)制代碼

后來想到的辦法是設(shè)置一個變量show的值，當(dāng)show等于1，則在首頁的部分添加class="active",同理show=2時，在企業(yè)概況的部分添加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">企業(yè)概況</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">產(chǎn)品展示</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">聯(lián)系我們</b-nav-item> </b-navbar-nav>export default {data(){return{show:1}},methods:{selectIndex(){this.show = 1},selectCompanyProfile(){this.show = 2},//等等，不一一寫了} } 復(fù)制代碼

然而并未實(shí)現(xiàn)想像中動態(tài)添加的active的效果，原因是頁面發(fā)生了跳轉(zhuǎn)，重載了這個導(dǎo)航組件，所以show會一直是1，active永遠(yuǎn)在首頁上。那么在當(dāng)前頁面上進(jìn)行改變show的值就失敗了，故此引入今天要說的嘉賓---Vuex

在nuxt中使用vuex跟傳統(tǒng)在vue中使用vuex還不太一樣，首先nuxt已經(jīng)集成了vuex，不需要我們進(jìn)行二次安裝，直接引用就好，在默認(rèn)nuxt的框架模板下有一個store的文件夾，就是我們用來存放vuex的地方

Nuxt.js 支持兩種使用 store 的方式：

普通方式：store/index.js 返回一個 Vuex.Store 實(shí)例 模塊方式：store 目錄下的每個 .js 文件會被轉(zhuǎn)換成為狀態(tài)樹指定命名的子模塊 （當(dāng)然，index 是根模塊，相當(dāng)于設(shè)置了namespaced: true) 復(fù)制代碼

Nuxt.js提供了模塊方式的簡單寫法：使用狀態(tài)樹模塊化的方式，store/index.js 不需要返回 Vuex.Store 實(shí)例，直接將 state、mutations 和 actions 暴露出來即可。

我寫的項(xiàng)目紅沒有把state暴露出來，當(dāng)然，你們可以暴露來，我在store文件夾下創(chuàng)建了3個文件，分別是index.js，mutations.js和actions.js,其中index.js的內(nèi)容是

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

mutations.js的內(nèi)容是

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} } 復(fù)制代碼

在導(dǎo)航的部分我沒有涉及到action的操作，故此action的內(nèi)容暫不做展示。

在index.js的部分我設(shè)置了show的默認(rèn)值為1，mutations.js的部分我寫了很多等待調(diào)用的方法。

下面vue的頁面要獲取vuex存儲的show的值，并調(diào)用方法，代碼為

<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()" >企業(yè)概況</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()">產(chǎn)品展示</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()">聯(lián)我們</b-nav-item></b-navbar-nav>import {mapState, mapMutations} from 'vuex'export default {data(){return{}},methods:{// 導(dǎo)航切換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')},// 導(dǎo)航切換部分結(jié)束}} 復(fù)制代碼

不知道大家注意到?jīng)]有我把之前的 href 鏈接給去掉了，而是換成了點(diǎn)擊事件，因?yàn)槿绻乙廊挥?href 鏈接，并且click方法里面直接調(diào)用

this.$store.commit('selectIndex') 復(fù)制代碼

當(dāng)我點(diǎn)擊企業(yè)概況，正常情況下頁面發(fā)生跳轉(zhuǎn)，且show的值變?yōu)?，藍(lán)色背景也轉(zhuǎn)移到企業(yè)概況上去，但事實(shí)上頁面發(fā)生跳轉(zhuǎn)時，vuex里show的值會先變成2然后又變回1，頁面跳轉(zhuǎn)了，但active依然沒有添加對，當(dāng)我去掉 href 后，改用click點(diǎn)擊跳轉(zhuǎn)就成功了，這個大家可以嘗試一下，具體原因我也不太清除，如果有大神知道懇請告知。

反正利用vuex來達(dá)到導(dǎo)航欄active的切換跌跌撞撞一上午總算從坑里爬出來了，大家也應(yīng)該能看的出來啊，我的語言組織能力不是很好，但我真的用力在把我的爬坑過程給大家介紹一下，二來也是記錄一下我碼代碼的這么一個過程，我是很喜歡交朋友的，如果你對于這篇文章看不太懂，如果你目前在學(xué)習(xí)nuxt或者vue的過程中有什么問題或疑惑，都可以留言或者跟我私信，我是很樂意回答你的，雖然本人也很菜鳥，但可以一起學(xué)習(xí)一起進(jìn)步嘛，啊哈哈哈！！！

就醬。

轉(zhuǎn)載于:https://juejin.im/post/5b0d1aa96fb9a00a0a4d5e9e

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。