如何使 Vuex 存储更改触发渲染刷新？

Question

我正在尝试实现一些 UI 组件，目前正在开发下拉菜单。由于打开下拉菜单需要关闭所有其他下拉菜单，我正在尝试使用 Vuex.Store 来保持全局状态，因为我读过这是在状态更改时导致视图刷新的正确方法。但这对我不起作用。

这是我目前的尝试：https://jsfiddle.net/2y573o24/1/

没有 this.$forceUpdate()（注释掉），视图不会根据方法更新。但是它会强制更新当前组件，而不是其他组件，这就是共享状态的意义所在。

EDIT1：我在这里尝试使用 mapState：https://jsfiddle.net/2y573o24/3/

EDIT2：所以我从头开始使用 Vuex 文档计数器示例，并且它有点工作：https://jsfiddle.net/ssr9pkLa/1/

但是它需要更新状态直接根子级 (ddCounter) 并在模板中显示它。这是否意味着无法跟踪状态对象的更改？

Answer 1

我制作了一个小的 JsFiddle 来解释我的解决方案：https://jsfiddle.net/2y573o24/4/

基本上，我使用名为 selectedDropdown:

的第二个变量

  state: {
    dropdowns: {},
    selectedDropdown: null
  }

我们只需要在我们的视图中检查这个值：

  <div>
    <a href="#" @click.prevent="dropdownToggle('A')">Toggle A</a>
    <div v-show="selectedDropdown === 'A'">
      Toggle A ON
    </div>
  </div>

如何使 Vuex 存储更改触发渲染刷新？

How to make Vuex store changes trigger render refresh?

javascript

vue.js

vuex