Question

我做了两个不同的部分。一v-navigation-drawer 第二个按钮有一个按钮，可更改vuex中的v-navigation-drawer状态。

在小屏幕上，将调用v-navigation-drawer，并且在单击灰色区域后，vuex中的状态不会更改。

enter code here

drawer.vue

<template>
    <v-navigation-drawer
        fixed
        :value="drawer"
        app
        :class="getSettingsTheme"
        :mini-variant="mini"
        >
    <b>menu</b>
   </v-navigation-drawer>
</template>

sitebar.vue

<template>
    <v-toolbar fixed app clipped-right :class="getSettingsTheme">

        <v-tooltip right>
            <v-btn slot="activator" icon @click.stop="drawerMut">
                <v-icon class="theme--light grey--text" color="grey lighten-1">menu</v-icon>
            </v-btn>
            <span>Show/Hide drawer</span>
    </v-tooltip>

  </v-toolbar>
</template>

vuex

export default new Vuex.Store({
state: {
    drawer: true,
},
mutations: {
    drawerMut(state) {
        state.drawer = !state.drawer
    }
},
getters: {
    drawer(state) {
        return state.drawer 
    },
}})

Answer 1

您可以从商店中读取drawer状态并更新到商店

在Vue中，我们有computed setter，请仔细阅读文档。

如果您使用:value，则在背景幕上单击时，drawer的状态/值将不会更新，因此使用v-model和drawer并使用setter和吸气剂。

export default {
    data() {
      return {
        mini: true,
        getSettingsTheme: ''
      }
    }
    computed: {
      drawer: {
        get() {
          return this.$store.getters['drawer'];
        },
        set(val) {
          this.$store.commit('drawerMut', val);
        },
      }
    }
  }

<template>
  <v-navigation-drawer fixed
                       v-model="drawer"
                       app
                       :class="getSettingsTheme"
                       :mini-variant="mini">
    <b>menu</b>
  </v-navigation-drawer>
</template>

如何更改状态？

1 个答案: