Vue.js - Vuex를 사용하여 동적 사이드바 사고 방식(Navbar에서 사이드바까지) 열기/닫기

Vue.js - Vuex를 사용하여 동적 사이드바 사고 방식(Navbar에서 사이드바까지) 열기/닫기

웹 사이트에서 동적 사이드바를 만들려고 하는데 메뉴 단추가 다른 구성 요소(Navbar)에 있어.어떻게 하면 그들이 vuex를 통해 서로 의사소통하게 할 수 있을까?봐, 나도 같은 구성 요소에서 어떻게 하는지는 알지만, 난 여기서 Navbar에서 사이드바로 부울 상태를 전달하기 위해 애쓰고 있어.

다음과 같이 스토어를 정의하십시오. '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>

Vuex를 사용하는 전체 목적은 구성 요소 전체에 걸쳐 공통적인 상태를 가지는 것이다.한 가지 요소로부터 이것을 전달할 필요는 없고, 그들은 주를 공유한다.

한 성분에 돌연변이를 일으키는 경우 변수를 설정하려면:state.myVar, 수정된 에 액세스할 수 있음this.$store.state.myVar항상 수정된 값을 반영하는 다른 구성 요소.

코드 샘플이 이렇게 작동하지 않으면 추가하십시오.

참조URL: https://stackoverflow.com/questions/44235453/vue-js-open-close-a-dynamic-sidebar-thought-diferrent-components-navbar-to-si