如何使 Vuex 商店更改触发渲染刷新？答案

【问题标题】：How to make Vuex store changes trigger render refresh?如何使 Vuex 商店更改触发渲染刷新？
【发布时间】：2017-05-03 10:56:35
【问题描述】：

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

【问题讨论】：

在您的 EDIT2 之后我无法理解问题所在。
@saurabh 问题是 Vuex 没有自动跟踪对象。显然需要用Vue.set(obj, 'prop', value); 明确设置它们我假设它们是自动跟踪的，因为我已经在分析器中的每个对象道具上看到了自定义获取/设置处理程序。

标签： javascript vue.js vuex

【解决方案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>

【讨论】：

谢谢，使用一个 var 表示当前打开的下拉菜单效果很好。我添加了全局<div id="app" @click="ddToggle(false)"> 以在单击页面上的其他任何位置时关闭所有打开的下拉菜单，并在所有切换上添加@click.prevent.stop="ddToggle()" 以避免触发重置。如果在下拉内容中单击，我将如何不关闭当前下拉列表？谢谢！编辑：没关系，在下拉容器中添加@click.stop="ddStay()"，就可以了！