在Vuetify中管理覆盖被解雇组件的状态

Question

我是vuetify/nuxt第一次构建一个前端,我已经将我的v-navigation-drawer组件移出default.vue布局,并将其移动到它自己的组件中,以便可以在多个布局中重用它.

此抽屉的激活器仍保留在default.vue组件中,因此我sidebar向vuex 添加了一个状态:

export const state = () => ({
    baseurl: 'http://example.com/api/',
    sidebar: false,
    authenticated: false,
    token: null,
    user: null,
})

侧边栏的变异器看起来像这样:

export const mutations = {
    toggleSidebar(state) {
        state.sidebar = !state.sidebar;
    }
}

这在打开抽屉时非常有效,但由于抽屉通过单击叠加层或单击侧边栏(如果您关闭了遮盖物)而被解除,因此vuex会抛出一个巨大的错误:

如何通过vuex正确地完成这项工作？

Answer 1

不使用抽屉模型直接绑定,而是$store.state.sidebar使用抽屉组件中的计算设定器.请注意,您必须从抽屉本身传递新值,不要只切换商店中已有的任何内容.

<template>
  <v-navigation-drawer v-model="drawer" ...>
</template>

<script>
  export default {
    computed: {
      drawer: {
        get () {
          return this.$store.state.sidebar
        },
        set (val) {
          this.$store.commit('sidebar', val)
        }
      }
    }
  }
</script>

// vuex mutation
sidebar (state, val) {
  state.sidebar = val
}

https://vuejs.org/v2/guide/computed.html#Computed-Setter
https://vuex.vuejs.org/en/forms.html