How to make Vuex store changes trigger render refresh?

Question

I'm trying to implement some UI components, and currently working on dropdowns. Since opening a dropdown requires closing all others, I'm trying to use Vuex.Store to keep global state, since I've read this is the proper way to cause view refreshes on state changes. But it doesn't really work for me.

Here's my current attempt: https://jsfiddle.net/2y573o24/1/

Without this.$forceUpdate() (commented out) the view doesn't get updated on method. But then it will force to update the current component, but not others, which is the point of shared state.

EDIT1: Here i'm trying to use mapState: https://jsfiddle.net/2y573o24/3/

EDIT2: So I've started from scratch with Vuex docs counter example, and got it somewhat working: https://jsfiddle.net/ssr9pkLa/1/

However it requires updating state immediate root child (ddCounter) AND showing it in the template. Does it mean there's no way to track changes to state objects?

Answer 1

I made a small JsFiddle to explain my solution: https://jsfiddle.net/2y573o24/4/

Basically, I make use of a second variable named selectedDropdown:

  state: {
    dropdowns: {},
    selectedDropdown: null
  }

We just have to check this value in our view:

  <div>
    <a href="#" @click.prevent="dropdownToggle('A')">Toggle A</a>
    <div v-show="selectedDropdown === 'A'">
      Toggle A ON
    </div>
  </div>