Vue.js

Question

我想在我的网站上制作一个动态侧边栏，但菜单按钮位于另一个组件 (Navbar) 中。我怎样才能让他们通过 vuex 相互通信？看，我知道如何在同一个组件中做到这一点，但我在这里努力将这个布尔状态从 Navbar 传递到 Sidebar。

Answer 1

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

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

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

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

Vue.js - Open/close 使用 vuex 的动态侧边栏认为不同的组件（导航栏到侧边栏）

Vue.js - Open/close a dynamic Sidebar thought diferrent components (Navbar to Sidebar) using vuex

boolean

components

vuex

state-management