Javascript 使用vuex从另一个组件控制和更新状态

例如，我有一个名为App.vue的文件，其中有导航抽屉组件。我有一个名为Home.vue的文件，其中包含工具栏组件。问题是，我需要从Home.vue的工具栏组件（同样，导航抽屉组件在Home.vue中呈现）切换导航抽屉状态（true或false）。下面的代码不会返回任何错误，也不会更改导航抽屉的可见性。此外，如果在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>

。。。
从“./store”导入存储
导出默认值{
数据：函数（）{
返回{
抽屉：这个。$store.state.drawer
}
}
}

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>

。。。
从“../store”导入存储
导出默认值{
数据：函数（）{
返回{
抽屉：这个。$store.state.drawer//好像我不需要它
}
}
}

您可以使用导航抽屉的属性

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>

...
从“vuex”导入{mapGetters}
导出默认值{
计算：{
…地图绘制者([
“主动的”
])
},
}

Home.vue：

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

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

... 
导出默认值{
方法：{
切换（）{
此.$store.dispatch（'toggleDrawer'））
}
}
}

注意：当您在商店中定义了一个操作

toggleDrawer

时，您可以使用dispatch而不是commit

---

这是一篇较老的帖子，但如果有人来寻找答案，这似乎很有效

从Vuex指南的表单处理部分

我修改了提供的codesandbox（谢谢！）

另一种方法是使用v模型

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

使用双向计算属性，而不是MapGetter

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

导出默认值{
计算：{
出票人：{
得到（）{
退回此。$store.state.drawer
},
设置（值）{
此.$store.commit（'toggleDrawer'，值）
}
}
}
}

开发工具显示了什么？单击图标时，

状态.抽屉

是否会更新？谢谢！我一到家就照你的建议去做！好的，谢谢，它可以工作，但是如果我绑定了值，我需要点击两次切换按钮来显示抽屉。我检查了dev工具，发现在我关闭抽屉后，状态保持不变（表示为true），再次单击按钮后，它将切换为false，下一次单击时将更改为true。有办法解决这个问题吗？