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

Posted 2023-02-23

【中文标题】Vue.js - 使用 vuex 打开/关闭动态侧边栏思想不同的组件（导航栏到侧边栏）

【英文标题】：Vue.js - Open/close a dynamic Sidebar thought diferrent components (Navbar to Sidebar) using vuex

【发布时间】：2017-10-29 08:20:18

【问题描述】：

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

【参考方案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>