将 Vuetify 导航抽屉 v-modelled 切换为 Vuex 变量 [英] Toggling Vuetify navigation drawer v-modelled to Vuex variable

问题描述

(我发现了一些类似的问题，但似乎没有一个能解决我的问题，但是如果我遗漏了什么，请参考.)

(I spied some similar questions, but none seemed to address my problem, however please refer if I missed something.)

我正在使用 Vue、Vuex 和 Vuetify.使用 "Google Keep"示例布局，我分解了 NavDrawer 和 AppBar 组件.然而，我在让 NavDrawer 切换工作时遇到了一些麻烦.

I'm using Vue, Vuex, and Vuetify. Working from the "Google Keep" example layout, I factored out the NavDrawer and AppBar components. I'm having some trouble getting the NavDrawer toggle to work, however.

在实现 Vuex 之前，我使用了 props 和 events，通过父组件.使用Vuex，我的代码如下:

Before implementing Vuex, I used props and events, going through the parent component. With Vuex, my code is as follows:

ma​​in.js:

const store = new Vuex.Store({
  state: {
    drawerState: null
  },
  mutations: {
    toggleDrawerState(state) {
      state.drawerState = !state.drawerState
    }
  }
})

AppBar.vue:

<template>
  <v-app-bar app clipped-left class="primary">
    <v-app-bar-nav-icon @click="toggleDrawer()"/>
  </v-app-bar>
</template>

<script>
export default {
  name: 'AppBar',
  methods: {
    toggleDrawer: function() {
      this.$store.commit('toggleDrawerState')
    }
  }
}
</script>

NavigationDrawer.vue:

<template>
  <v-navigation-drawer v-model="drawerState" app clipped color="grey lighten-4">
    <!-- content -->
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'NavigationDrawer',
  computed: {
    drawerState: {
      get: function() { return this.$store.state.drawerState },
      set: () => null
    }
  }
}
</script>

set: () =>在 NavDrawer 的计算属性中为 null 是因为我一开始设置它调用了mutation，导致了一个切换的反馈循环.

The set: () => null in the NavDrawer's computed properties is because I at first set it to call the mutation, which resulted in a feedback loop of toggling.

现在，我的问题是，给定 null 的初始 v-model 值，Vuetify 在桌面上打开抽屉并在移动设备上关闭.当 drawerState = !drawerState 被调用时，null 被设为 true，但这只会让抽屉在桌面上保持打开状态，这意味着必须再次单击按钮才能关闭抽屉.在最初的双触发问题之后，它在桌面上运行良好.然而，在移动设备上，它总是需要两个触发器.(我说的是移动设备，但实际上我只是缩小了浏览器窗口的大小.)我认为这是因为在调整大小(或加载时)时，抽屉会自动隐藏，但无法更新 Vuex 存储布尔值，这意味着双触发器是必须的.

Now, my problem is that, given an initial v-model value of null, Vuetify has the Drawer open on desktop and closed on mobile. And when the drawerState = !drawerState is called, the null is made true, but that just keeps the drawer open on desktop, meaning that the button has to be clicked again to close the drawer. After that initial double-trigger problem, it works fine on desktop. On mobile, however, it always needs two triggers. (I say mobile, but really I just resized my browser window down.) I assume this is because when resizing (or on load), the drawer automatically hides, but has no way to update the Vuex store boolean, meaning that a double trigger is necessary.

我的问题是:实现 Vuetify 的 navdrawer 以便从另一个组件切换它的标准或最佳实践方法是什么?我认为状态(无论是打开还是关闭)可能会直接存储，但没有打开"或关闭"事件可以访问它.(例如这个问题没有答案.)它在示例页面上运行良好，但是如何将其调整为子组件?

My question is thus: what is the standard or best-practice way to implement Vuetify's navdrawer, so as to toggle it from another component? I thought that the state (whether open or closed) might be directly stored, but there are no "opened" or "closed" events to access it by. (E.g. this question has no answers.) It works fine on the example page, but how can that be adapted to work as child components?

谢谢！

推荐答案

使用 Vuex getter 并在您的计算 getter 中引用它们，以及在计算 setter 中检索新值并使用它来提交是一个不错的选择商店里的突变.所以你的商店会变成:

It's a good option to use Vuex getters and refer to them in your computed getter, as well as retrieving the new value in the computed setter and using that to commit the mutation in the store. So your store would become:

const store = new Vuex.Store({
  state: {
    drawerState: false
  },
  mutations: {
    toggleDrawerState (state, data) {
      state.drawerState = data
    }
  },
  getters : {
    drawerState: (state) => state.drawerState
  }
})

你的导航抽屉组件将变成:

And your navigation drawer component would become:

<template>
  <v-navigation-drawer v-model="drawerState" app clipped color="grey lighten-4">
    <!-- content -->
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'NavigationDrawer',
  computed: {
    drawerState: {
      get () { return this.$store.getters.drawerState },
      set (v) { return this.$store.commit('toggleDrawerState', v) }
    }
  }
}
</script>

这是一个显示完整示例的代码笔:https://codepen.io/JamieCurnow/pen/wvaZeRe

Here is a codepen to show a full example: https://codepen.io/JamieCurnow/pen/wvaZeRe

这篇关于将 Vuetify 导航抽屉 v-modelled 切换为 Vuex 变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！