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

【问题标题】：How to change state in one component and listen to it in another Vue.js?如何在一个组件中更改状态并在另一个 Vue.js 中监听它？
【发布时间】：2019-01-08 20:55:37
【问题描述】：

我有两个组件。在其中一个中，我正在点击商店对商店进行更改。在另一个方面，我想听听这种变化并做出反应。

如果我查看我的 Vuex 商店，我的提交在每次点击时都有效，但我不确定如何在另一个组件中监听它。

组件 A

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

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

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

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

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

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

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

【讨论】：

这是我的 getter const sideNavIsVisible = (state, status) => { return state.open; }; 但是我如何让它与我的状态保持同步呢？现在它从状态返回初始值。
创建：mutations: { setOpen(state, payload) { state.open = payload } }，并使用此突变来更改状态，如this.$store.commit('setOpen', someValue)