通过vuex控制tabbar显示

应用时需要先下载vuex：yarn add vuex

建立文件夹和文件
src/store/index.js

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

let store = new Vuex.Store({
    
})

export default store

src/main.js

import store from "./store"
new Vue({
  router, //目的 就是让组件可以访问this.$route / this.$router api.
  store,  //目的 就是让组件可以访问this.$store
  render: h => h(App)
}).$mount('#app')

在组件中，this.$store如果存在，则vuex就已经可以在项目里面使用了。

需要在vuex中创建一个isTabbarShow这个state.

let store = new Vuex.Store({
    state:{ //用来定义vuex所维护的状态
        isTabbarShow:true
    },
    mutations:{ //只能通过定义mutations的一些方法，来去同步的更改vuex中的状态。
        show(state){
            state.isTabbarShow = true
        },
        hide(state){
            state.isTabbarShow = false
        }
    }
})
 <!--显示tabbar-->
 <Tabbar v-if="$store.state.isTabbarShow"></Tabbar>