Question

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

现在，我希望工具栏中的按钮可以让用户打开边栏。但是工具栏和侧栏是两个不同的组件。因此，我正在使用Vuex来管理状态。但是状态是可计算的并且没有设置方法，因此我不能在navigaion控制器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
    },
  },
}

Answer 2

在 Vuetify 中，组件 v-navigation-drawer 发出一个名为“input”的事件，由 v-model 使用。

该事件在导航抽屉显示和关闭时发出。如果我们在这两种情况下都调用“toggle”函数，我们将进入无限循环。

我遇到了同样的问题，这就是我遇到的情况。

Answer 3

vuex希望您做的是使用适当的状态突变。

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

计算出的值将对突变做出反应。

Answer 4

在您的toolbar component上，您需要按钮；定义一个抽屉布尔属性。 toolbar component中带有按钮的html看起来像这样：

<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。

您会注意到，导航抽屉现在正在侦听抽屉属性。

如果这个答案不够用，请告诉我，我会为您创建一个例子。

VueJS + Vuex + Vuetify导航抽屉

4 个答案: