如何更改一个组件中的状态并在另一个Vue.js中侦听它？

Question

我有两个组成部分。在其中一项中，我将单击更改将更改提交到商店。在另一篇文章中，我想听听这一变化并对它做出反应。

如果我查看我的Vuex商店，则每次点击都可以进行提交，但是我不确定如何在其他组件中进行监听。

组件A

methods: {
        openMenu() {
            this.open = !this.open;
            this.$store.commit('OPEN_MENU', this.open);
        }
    }

<button @click="openMenu"></button>

在组件B中，我尝试绑定到计算属性，但是在创建组件时它仅运行一次。

Answer 1

1. 为“ open”创建vuex getter
2. 在组件B中创建计算属性：

computed: {
  open () {
    return this.$store.getters.open
  }
}

1. 在脚本或模板中使用this.open