在做 APP 類專案開發的時候，有一個很常見的需求就是 APP 通常有一個底部導航，點選導航的不同 tab 要切換到不同的介面，在這些通過導航切過去的介面上是需要顯示底部導航來讓使用者方便操作的。
除了這些帶導航的頁面之外，還有一些獨立的頁面是不需要底部導航的，比如說註冊，登入等頁面。那麼怎樣能夠比較方便的控制底部導航的顯示和隱藏呢？這就可以用到 Vue 的狀態管理外掛 Vuex 了，關於 Vuex 的基礎知識，可以看官方文件 https://vuex.vuejs.org/zh-cn/
文件上面對一些概念性的東西解釋的比較清楚，然而例子卻過於簡單了，這裡我結合實際開發中的需求來講下 Vuex 在實際專案中的一個最簡單的用法。也就是前面開頭提到的那個需求。

Vue-cli 專案搭建，安裝 Vuex 什麼的就直接跳過吧，直接進入主題。

一，定義狀態

我們首先要給底部導航欄設定一個狀態值，Boolean 型別就可以了，表示是顯示還是隱藏狀態。這個值要是全域性的，在整個 APP 中要隨時隨地都能夠訪問到。那麼這個值要定義在哪裡，怎麼定義呢？我們可以參照腳手架幫我們自動生成的路由檔案的寫法，基本是一樣的。
在 src 下面新建一個 store 資料夾，然後在裡面新建一個 index.js 檔案，內容如下：

這樣就定義好了一個狀態，showBottomNav

二，獲取狀態

狀態定義好之後，首先要做的就是在 main.js 中引入我們的狀態檔案，也是跟引入 router 的方式一樣。

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    components: {App},
    template: '<App/>'
})

到這裡，準備工作就做完了，下面就是去獲取我們要的狀態值，我們可以直接在元件上去獲取這個值，用 v-if 指令根據狀態來控制組件顯示或隱藏。

<BottomTabs v-if="$store.state.showBottomNav"></BottomTabs>

從上面的程式碼中，可以看到，在元件上可以直接通過 $store.state.showBottomNav 這種語法來獲取 showBottomNav 欄位的值，那麼在 js 程式碼中呢？只需要在前面加上一個 this 就行了，這個 this 就是全域性的 vue 例項。

三，修改狀態

開發需求中提到，在某些頁面我們需要控制導航欄隱藏，做了前面那麼多事情後，要達到這個需求就很簡單了，只需要改變那個狀態的值就行了，怎麼去改變呢？這時候就可以用到 vue 給我們提供的生命週期函數了。
每個元件都有它的生命週期，要改變這個狀態，我們應該在元件建立的時候就去修改狀態，這樣，當元件建立完畢，導航也隱藏掉了，不會出現先出現頁面，再隱藏導航的情況。

    export default {
        name: "login",
        created() {
            this.$store.state.showBottomNav = false
        }
    }

以上，就是如何使用 vuex 狀態管理在完成實際開發中一個常見需求的方法。