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 回答