javascript - VueJS + Vuex + Vuetify 抽屉导航

Question

我有一个带有工具栏和侧边栏的页面。侧边栏仅在用户登录时可见。
侧边栏Navigation Drawer如果用户在移动设备上，则默认不可见。

现在我想要工具栏中的一个按钮，用户可以打开侧边栏。
但是工具栏和侧边栏是两个不同的组件。
因此我使用 Vuex 来管理状态。但是状态是计算的并且没有 setter ，所以我不能在导航 Controller v-model 中直接使用状态。

现在我读到您可以在计算变量上定义 get 和 set 方法。
但这是最好的方法吗？

Answer 1

在您的模板中:

<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
    },
  },
}