boolean - Vue.js - 使用 vuex 打开/关闭动态侧边栏，考虑不同的组件(导航栏到侧边栏)

Question

我正在尝试在我的网站上制作动态侧边栏，但菜单按钮位于另一个组件(导航栏)中。我怎样才能让他们通过vuex相互通信？看，我知道如何在同一个组件中执行此操作，但我在这里努力将此 boolean 状态从导航栏传递到侧边栏。

Answer 1

按如下方式定义您的商店: 从“vue”导入 Vue 从 'vuex' 导入 Vuex

Vue.use(Vuex);

export const store = new Vuex.Store({
      state: {
        sideBarOpen: false
    },
    getters: {
        g_sideBarOpen(state){
            return state.sideBarOpen
        }
    },
    mutations: {
        toggleSideBar(state){
            state.sideBarOpen = !state.sideBarOpen;
        }
    },
});

在导航栏组件中单击菜单按钮的监听器

<template>
  <button @click="toggleSideBar" class=myMenuBtn"></button>
</template>

<script>
    export default{
        methods:{
            toggleSideBar(){
                this.$store.commit('toggleSideBar');
            }
        }
    }
</script> 

现在在托管 SideBar 组件的主组件中

<template>
  <side-bar v-show="showSideBar"></side-bar>
</template>

<script>
    import SideBar from './SideBar'
    export default{
        components:{
            'side-bar': SideBar
        },
        computed:{
            showSideBar(){
                this.$store.getters.g_sideBarOpen;
            }
        }
    }
</script>