VueJS + Vuex + Vuetify навигационный ящик

Question

У меня есть страница с панелью инструментов и боковой панелью. Боковая панель видна только когда пользователь вошел в систему. Боковая панель Навигационный ящик по умолчанию не отображается, если пользователь находится на мобильном устройстве.

Теперь я хочу кнопку на панели инструментов, чтобы пользователь мог открыть боковую панель. Но панель инструментов и боковая панель - это два разных компонента. Поэтому я использую Vuex для управления государством. Но состояние вычислимо и не имеет установщика, поэтому я не могу использовать прямое состояние в v-модели контроллеров navigaion.

Теперь я прочитал, что вы можете определить метод get и set для вычисляемых переменных. Но разве это лучший способ сделать это?

Answer 1

На вашем toolbar component, здесь вы хотите, чтобы ваша кнопка; Определите логическое свойство ящика. HTML-код с кнопкой в ​​toolbar 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 component вы также можете объявить переменную ящика. Тогда HTML будет выглядеть примерно так:

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

toolbar - это ваш toolbar component, о котором я упоминал ранее.

Вы заметите, что навигационный ящик теперь прослушивает свойство ящика.

Пожалуйста, дайте мне знать, если этого ответа недостаточно, я создам пример для вас

Answer 2

Вьюкс хочет, чтобы вы использовали правильную мутацию состояния.

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

И вычисленное значение будет реагировать на мутацию.