通過vuex控制tabbar顯示
阿新 • • 發佈:2020-10-14
應用時需要先下載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>