VueJS + Vuex + Vuetify 导航抽屉

Question

我有一个带有工具栏和侧边栏的页面。侧边栏仅在用户登录时可见。如果用户使用移动设备，侧边栏导航抽屉默认不可见。

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

现在我读到您可以在计算变量上定义 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']),
  }
...

在您的商店模块toolbar.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
    },
  },
}