Vuetify 탐색 드로어 v-modeled to Vuex

Vuetify 탐색 드로어 v-modeled to Vuex

(비슷한 질문을 몇 가지 보았지만, 어느 것도 제 문제에 대처하지 못한 것 같습니다만, 뭔가 빠뜨린 것이 있으면 참조해 주세요.)

Vue, Vue, Vuetify를 사용하고 있습니다."Google Keep" 예제 레이아웃을 사용하여 NavDrawer와 AppBar 구성 요소를 고려했습니다.하지만 NavDrawer 토글을 작동시키는 데 문제가 있습니다.

Vuex를 구현하기 전에는 소품이나 이벤트를 사용하여 상위 컴포넌트를 살펴보았습니다.Vuex의 코드는 다음과 같습니다.

main.filename:

const store = new Vuex.Store({
  state: {
    drawerState: null
  },
  mutations: {
    toggleDrawerState(state) {
      state.drawerState = !state.drawerState
    }
  }
})

AppBar.vue:

<template>
  <v-app-bar app clipped-left class="primary">
    <v-app-bar-nav-icon @click="toggleDrawer()"/>
  </v-app-bar>
</template>

<script>
export default {
  name: 'AppBar',
  methods: {
    toggleDrawer: function() {
      this.$store.commit('toggleDrawerState')
    }
  }
}
</script>

네비게이션 드로어vue:

<template>
  <v-navigation-drawer v-model="drawerState" app clipped color="grey lighten-4">
    <!-- content -->
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'NavigationDrawer',
  computed: {
    drawerState: {
      get: function() { return this.$store.state.drawerState },
      set: () => null
    }
  }
}
</script>

그set: () => nullNavDrawer의 계산된 속성에서는 처음에 변환을 호출하도록 설정했기 때문에 전환의 피드백 루프가 발생했기 때문입니다.

제 문제는 첫 번째가v-model의 가치nullVuetify에서는 데스크탑에서는 드로어가 열리고 모바일에서는 닫혀 있습니다.그리고 그 때drawerState = !drawerState라고 불립니다.null만들어졌다true다만, 데스크탑에서는 드로어를 열어 둘 뿐이므로, 드로어를 닫으려면 버튼을 다시 클릭할 필요가 있습니다.초기 이중 트리거 문제가 발생한 후 데스크톱에서 정상적으로 작동합니다.그러나 모바일에서는 항상 두 가지 트리거가 필요합니다.(모바일이라고 하는데 브라우저 창의 크기를 줄였습니다.)크기를 조정할 때(또는 로드 시) 드로어가 자동으로 숨겨지지만 Vuex 스토어 부울을 업데이트할 방법이 없기 때문에 이중 트리거가 필요하기 때문일 수 있습니다.

따라서 Vuetify의 내비게이터를 다른 컴포넌트에서 전환하기 위해 구현하기 위한 표준 또는 베스트 프랙티스 방법은 무엇입니까?상태(열린 상태든 닫힌 상태든)가 직접 저장될 수 있다고 생각했지만 액세스하기 위한 "열린" 이벤트나 "닫힌" 이벤트가 없습니다(예: 이 질문에는 답이 없습니다).예시 페이지에서는 정상적으로 동작합니다만, 어떻게 하면 아이 컴포넌트로 동작하도록 조정할 수 있을까요?

감사합니다!

Vuex getters를 사용하여 계산한 getter에서 참조하고 계산한 setter에서 새 값을 검색하여 스토어에서 변환을 커밋하는 것이 좋습니다.따라서 스토어는 다음과 같이 됩니다.

const store = new Vuex.Store({
  state: {
    drawerState: false
  },
  mutations: {
    toggleDrawerState (state, data) {
      state.drawerState = data
    }
  },
  getters : {
    drawerState: (state) => state.drawerState
  }
})

내비게이션 드로어 컴포넌트는 다음과 같습니다.

<template>
  <v-navigation-drawer v-model="drawerState" app clipped color="grey lighten-4">
    <!-- content -->
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'NavigationDrawer',
  computed: {
    drawerState: {
      get () { return this.$store.getters.drawerState },
      set (v) { return this.$store.commit('toggleDrawerState', v) }
    }
  }
}
</script>

다음은 완전한 예를 보여주는 코드펜입니다.https://codepen.io/JamieCurnow/pen/wvaZeRe

언급URL : https://stackoverflow.com/questions/60978985/toggling-vuetify-navigation-drawer-v-modelled-to-vuex-variable