Переключение навигационной панели Vuetify v-моделируется в переменную Vuex - PullRequest
Новая
       8

Переключение навигационной панели Vuetify v-моделируется в переменную Vuex

0 голосов
/ 01 апреля 2020

(Я заметил несколько похожих вопросов, но, похоже, ни один из них не решил мою проблему, однако, пожалуйста, обратитесь, если я что-то пропустил.)

Я использую Vue, Vuex и Vuetify. Работая с примером "Google Keep" , я разработал компоненты NavDrawer и AppBar. Однако у меня возникают некоторые проблемы с переключением NavDrawer на работу.

До реализации Vuex я использовал реквизиты и события, проходя через родительский компонент. С Vuex мой код выглядит следующим образом:

main. js: 

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>

NavigationDrawer. 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: () => null в вычисляемых свойствах NavDrawer состоит в том, что я сначала установил его для вызова мутации, которая в результате я получил сообщение о переключении l oop.

Теперь моя проблема в том, что при начальном значении v-model null Vuetify открывает ящик на рабочем столе и закрывает на мобильном телефоне. И когда вызывается drawerState = !drawerState, null становится true, но это просто держит ящик открытым на рабочем столе, а это означает, что для закрытия ящика нужно нажать кнопку еще раз. После этой первоначальной проблемы с двойным триггером она отлично работает на рабочем столе. Однако на мобильном устройстве всегда нужны два триггера. (Я говорю «мобильный», но на самом деле я просто изменил размер окна браузера вниз.) Я предполагаю, что это происходит потому, что при изменении размера (или при загрузке) ящик автоматически скрывается, но не имеет возможности обновить логическое значение хранилища Vuex, что означает двойной запуск

Мой вопрос таков: каков стандартный или наилучший способ реализации navdrawer Vuetify, чтобы переключить его с другого компонента? Я думал, что состояние (открытое или закрытое) может быть сохранено напрямую, но нет никаких «открытых» или «закрытых» событий для доступа к нему. (Например, этот вопрос не имеет ответов.) Он прекрасно работает на странице примера, но как его можно адаптировать для работы в качестве дочерних компонентов?

Спасибо!

1 Ответ

0 голосов
/ 02 апреля 2020

Это хорошая возможность использовать геттеры Vuex и ссылаться на них в вычисляемом геттере, а также извлекать новое значение в вычисляемом сеттере и использовать его для фиксации мутации в хранилище. Таким образом, ваш магазин стал бы: 

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

...