如何进行状态更改？

Question

我做了两个不同的组件。在一个v-navigation-drawer中，第二个有一个按钮，可以更改vuex中的v-导航-抽屉的状态。

在小屏幕上时，会调用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和getter计算的一样。

​

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>

​