2

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

4

2 回答 2

3

如下定义您的商店： import Vue from 'vue' import Vuex from '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>
于 2017-05-29T06:19:38.440 回答
2

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

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

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

于 2017-05-29T06:01:54.127 回答