Question

我试图实现一些UI组件，目前正在处理下拉列表。由于打开下拉列表需要关闭所有其他内容，因此我尝试使用Vuex.Store来保持全局状态，因为我已经读过这是导致状态更改时视图刷新的正确方法。但它对我来说并不适用。

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

如果没有this.$forceUpdate()（已注释掉），则视图无法更新方法。但是它会强制更新当前组件，而不是其他组件，这是共享状态的重点。

EDIT1：我试图使用mapState：https://jsfiddle.net/2y573o24/3/

EDIT2：所以我从头开始使用Vuex docs计数器示例，并使其有所改进：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存储更改触发渲染刷新？

1 个答案: