VUE 爬坑之旅-- 用 Vuex 状态管理来控制底部导航栏的显示隐藏

在做 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 状态管理在完成实际开发中一个常见需求的方法。