1. 程式人生 > 實用技巧 >通過vuex控制tabbar顯示

通過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>