切换 Vuetify 导航抽屉 v-modeled 到 Vuex 变量

Question

（我发现了一些类似的问题，但似乎没有一个可以解决我的问题，但是如果我遗漏了什么，请参考。）

我正在使用 Vue、Vuex 和 Vuetify。从“Google Keep”示例布局开始，我分解出 NavDrawer 和 AppBar 组件。但是，我在让 NavDrawer 切换工作时遇到了一些麻烦。

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

主.js：

const store = new Vuex.Store({

  state: {

    drawerState: null

  },

  mutations: {

    toggleDrawerState(state) {

      state.drawerState = !state.drawerState

    }

  }

})

AppBar.view:

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

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

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

因此，我的问题是：实现 Vuetify 的 navdrawer 以便从另一个组件切换它的标准或最佳实践方法是什么？我认为状态（无论是打开还是关闭）可能会被直接存储，但是没有“打开”或“关闭”事件可以访问它。（例如，这个问题没有答案。）它在示例页面上运行良好，但它如何适应作为子组件工作？

Answer 1

使用 Vuex getter 并在计算的 getter 中引用它们，以及在计算的 setter 中检索新值并使用它在存储中提交突变是一个不错的选择。所以你的商店会变成：const store = new Vuex.Store({&nbsp; state: {&nbsp; &nbsp; drawerState: false&nbsp; },&nbsp; mutations: {&nbsp; &nbsp; toggleDrawerState (state, data) {&nbsp; &nbsp; &nbsp; state.drawerState = data&nbsp; &nbsp; }&nbsp; },&nbsp; getters : {&nbsp; &nbsp; drawerState: (state) => state.drawerState&nbsp; }})您的导航抽屉组件将变为：<template>&nbsp; <v-navigation-drawer v-model="drawerState" app clipped color="grey lighten-4">&nbsp; &nbsp; <!-- content -->&nbsp; </v-navigation-drawer></template><script>export default {&nbsp; name: 'NavigationDrawer',&nbsp; computed: {&nbsp; &nbsp; drawerState: {&nbsp; &nbsp; &nbsp; get () { return this.$store.getters.drawerState },&nbsp; &nbsp; &nbsp; set (v) { return this.$store.commit('toggleDrawerState', v) }&nbsp; &nbsp; }&nbsp; }}</script>这是一个显示完整示例的代码笔： https ://codepen.io/JamieCurnow/pen/wvaZeRe