Vue.js - 使用 vuex 打开/关闭动态侧边栏思想不同的组件（导航栏到侧边栏）答案

【问题标题】：Vue.js - Open/close a dynamic Sidebar thought diferrent components (Navbar to Sidebar) using vuexVue.js - 使用 vuex 打开/关闭动态侧边栏思想不同的组件（导航栏到侧边栏）
【发布时间】：2017-10-29 08:20:18
【问题描述】：

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

【问题讨论】：

标签： boolean vue.js components vuex state-management

【解决方案1】：

使用Vuex 的全部目的是在您的组件之间拥有一个共同的状态。您不必从一个组件进行通信，它们共享状态。

如果你在一个组件中提交了一个变更，设置一个变量：state.myVar，你可以在另一个组件中访问修改后的this.$store.state.myVar，这将始终反映修改后的值。

如果不能这样工作，请添加您的代码示例。

【讨论】：

【解决方案2】：

如下定义您的商店：从 '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;
        }
    },
});

在 NavBar 组件中单击菜单按钮的监听器

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

【讨论】：