VueJS + Vuex + Vuetify 导航抽屉答案

【问题标题】：VueJS + Vuex + Vuetify Navigation DrawerVueJS + Vuex + Vuetify 导航抽屉
【发布时间】：2019-06-05 02:46:25
【问题描述】：

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

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

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

【问题讨论】：

加上一些示例代码会更好。

标签： javascript vuejs2 vuetify.js

【解决方案1】：

vuex 希望你做的方式是使用正确的状态突变。

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

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

【讨论】：

【解决方案2】：

在您的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。

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

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

【讨论】：

【解决方案3】：

在您的模板中：


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

【讨论】：

这对我的用例最有效 isHomeNavigationDrawerOpen: null, 可以设置为真/假，具体取决于您想要的初始状态。
它应该被标记为正确答案

【解决方案4】：

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

当导航抽屉显示和关闭时触发此事件。如果我们在这两种情况下都调用 'toggle' 函数，我们将进入一个无限循环。

我有同样的问题，这就是发生在我身上的事情。

【讨论】：