VueJ + Vuex + Vuetify 내비게이션 드로어

VueJ + Vuex + Vuetify 내비게이션 드로어

툴바와 사이드바가 있는 페이지가 있습니다.사이드바는 사용자가 로그인 했을 때만 표시됩니다.사용자가 모바일 장치에 있는 경우 사이드바 네비게이션 드로어는 기본적으로 표시되지 않습니다.

이제 툴바에 사용자가 사이드바를 열 수 있는 버튼이 필요합니다.그러나 도구 모음과 사이드바는 서로 다른 두 가지 구성 요소입니다.따라서 Vuex를 사용하여 상태를 관리합니다.그러나 상태가 계산되고 설정기가 없으므로 탐색 컨트롤러 v-model에서 직접 상태를 사용할 수 없습니다.

이제 계산된 변수에 대해 get 및 set 메서드를 정의할 수 있다는 것을 읽었습니다.하지만 이게 최선의 방법일까요?

템플릿에서 다음을 수행합니다.

<template>
 <v-navigation-drawer
      :value="isHomeNavigationDrawerOpen"
      @input="TOGGLE_HOME_NAVIGATION_DRAWER"
      ...>
 </v-navigation-drawer>
</template>

<scripts>
import { mapState, mapActions } from 'vuex'
export default {

  computed: {
    ...mapState('userData', ['user', 'loggedIn']),
    ...mapState('toolbar', ['isHomeNavigationDrawerOpen']),
  },
  methods:{
    ...mapActions('toolbar', ['TOGGLE_HOME_NAVIGATION_DRAWER']),
  }
...

스토어 모듈툴바.js(또는 모듈명)에서

export default {
  state: {
    isHomeNavigationDrawerOpen: null,
  },
  actions: {
    TOGGLE_HOME_NAVIGATION_DRAWER(context, open) {
      context.commit('TOGGLE_HOME_NAVIGATION_DRAWER', open)
    },
  },
  mutations: {
    TOGGLE_HOME_NAVIGATION_DRAWER: (state, open) => {
      state.isHomeNavigationDrawerOpen = open
    },
  },
}

Vuetify에서 구성 요소 v-navigation-drawer는 v-model에서 사용하는 '입력'이라는 이벤트를 내보냅니다.

이 이벤트는 내비게이션 드로어가 표시되고 닫힐 때 발생합니다.두 경우 모두 '토글' 함수를 호출하면 무한 루프가 시작됩니다.

나도 같은 문제를 안고 있고 나에게 일어나고 있는 일이다.

vuex가 원하는 방법은 적절한 상태 변환을 사용하는 것입니다.

@click="$store.commit('open-sidebar')"

그리고 계산된 값은 돌연변이에 반응할 것입니다.

온 유저희쪽에서toolbar component여기서 버튼을 사용할 수 있습니다.드로어 부울 속성을 정의합니다.에 있는 버튼이 있는 htmltoolbar component다음과 같이 됩니다.

<v-toolbar color="primary" dark app :clipped-left="$vuetify.breakpoint.mdAndUp" fixed>
        <v-toolbar-side-icon @click.stop="$emit('update:drawer', !drawer)"></v-toolbar-side-icon>

에서toolbar componentdrawer 변수도 선언할 수 있습니다.그러면 html은 다음과 같습니다.

<toolbar :drawer.sync="drawer"></toolbar>
            <v-navigation-drawer class="secondary" dark fixed :clipped="$vuetify.breakpoint.mdAndUp" app v-model="drawer">

toolbar당신의 것입니다toolbar component아까 말씀드린 대로입니다.

네비게이션 드로어가 드로어 속성을 수신하고 있습니다.

이 답변이 불충분하면 사례를 작성하겠습니다.

언급URL : https://stackoverflow.com/questions/54125172/vuejs-vuex-vuetify-navigation-drawer