Question

例如，我有一个名为App.vue的文件，并且那里有导航抽屉组件。我有一个名为Home.vue的文件，带有工具栏组件。事情是，我需要从Home.vue的工具栏组件切换导航抽屉状态（真或假）（同样，导航抽屉组件在Home.vue中呈现）。下面的代码不会返回任何错误，也不会更改导航抽屉的可见性。另外，如果在store.js中手动设置状态，导航抽屉也会跟随它。谁能帮忙吗？

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    drawer: false
  },
  mutations: {
    toggleDrawer: function(state) {
      return state.drawer = !state.drawer;
    }
  },
  actions: {
    toggleDrawer({ commit }) {
      commit('toggleDrawer');
    }
  },
  getters: {
    active: (state) => {
      return state.drawer;
    }
  }
})

App.vue

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

<script>
  import store from './store'
    export default {
      data: function() {
        return {
          drawer: this.$store.state.drawer
        }
      }
    }
</script>

Home.vue

<v-toolbar-side-icon @click="$store.commit('toggleDrawer')"> ... </v-toolbar-side-icon>

<script>
  import store from '../store'
  export default {
    data: function() {
      return {
        drawer: this.$store.state.drawer // Seems like I don't need it here
      }
    }
  }
</script>

Answer 1

您可以使用导航抽屉的属性permanent而不是v-model（以避免在vuex外部更改商店），并使用您定义的getter active。

App.vue：

<template>
  <v-app >
    <v-navigation-drawer :permanent="active">
      ...
    </v-navigation-drawer>
  </v-app>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters([
        'active'
      ])
    },
  }
</script>

Home.vue：

<template>
  <v-toolbar-side-icon @click="toggle"> ... </v-toolbar-side-icon>
</template>

<script>
  export default {
    methods: {
      toggle() {
        this.$store.dispatch('toggleDrawer')
      }
    }
  }
</script>

注意：在商店中定义动作toggleDrawer时，您可以使用分派而不是提交。

实时示例here

Answer 2

这是一篇较旧的文章，但是如果有人来寻找答案，这似乎有用。

来自Vuex指南的“表单处理”部分，Two-way Computed Property

我修改了Sovalina（感谢！）link

另一种方法是使用v-model

<v-navigation-drawer v-model="drawer" app>

具有双向计算属性，而不是mapGetters

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

Vue控制和使用Vuex从另一个组件更新状态

2 个答案: