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

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

以下是我目前的尝试：

如果没有

this.$forceUpdate（）

（已注释掉），则无法在方法上更新视图。但随后它将强制更新当前组件，而不是其他组件，这是共享状态的点

EDIT1：我正在尝试使用mapState：

EDIT2：所以我从零开始使用Vuex docs反例，并在一定程度上实现了：

---

但是，它需要更新状态立即根子级（ddCounter）并在模板中显示它。这是否意味着无法跟踪状态对象的更改？

我制作了一个小JSFIDLE来解释我的解决方案：

基本上，我使用了第二个变量

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>

打开开关

我无法理解在编辑2之后出现了什么问题。@saurabh问题是Vuex没有自动跟踪对象。显然需要使用

Vue.set（obj，'prop'，value）显式设置它们我假设它们是自动跟踪的，因为我在profiler中看到了每个对象属性上的自定义get/set处理程序。谢谢，使用一个变量来表示当前打开的下拉列表运行良好。我已经在全局
上添加了当单击页面上的任何其他位置时关闭所有打开的下拉列表，并在所有切换上添加了
@click.prevent.stop=“ddToggle（）”
，以避免触发重置。如果在下拉列表内容中单击，我将如何不关闭当前下拉列表？谢谢编辑：没关系，在下拉容器上添加了
@click.stop=“ddStay（）”
，就这样！