3

我正在尝试实现一些 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) 并将其显示在模板中。这是否意味着无法跟踪状态对象的更改？

4

1 回答 1

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>
于 2016-12-18T13:05:08.363 回答