VueJS - Components not updating when Vuex state updated

Question

I have a vuex store with an item called "columnChoice" inside of the state. I have a component that's updating it in a text box, and a computed property that updates it and verifies that it's a positive integer. However, the component's computed properties aren't updating (according to the dev tools), even though the vuex store definitely is (also according to the dev tools).

Here's the code, I've removed the other methods/values that aren't relevant, but if it seems like something's missing let me know.

I've tried changing the computed setup from the "...mapState([])" one to this one, and I also tried the v-model setup with seperate set and get functions.

the Vuex store index.js:

import Vuex from 'vuex'

export default new Vuex.Store({
  state: {
    columnChoice: 1,
    processingStatus: 0,
    columnError: 0
  },
  mutations : {
    resetVars(state) {
      state.processingStatus = 0
      state.columnError = 0
      state.columnChoice = 1
    },

    setProcessingStatus(state, v) {
      state.processingStatus = v
    },

    columnError(state) {
      state.columnError = 1
    },
    columnGood(state) {
      state.columnError = 0
    },
    columnSet(state, v) {
      state.columnChoice = v
    }
  }
})

The component:

<template>
  <div class="row p-2">
    <div class="col-2">Column in reference file</div>
    <div class="col-10"><input type=text size=3 :value="columnChoice" @change="verifyColumn" id="columnChoice"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ColumnChoice',
  computed: {
    ...mapState([
      'columnChoice'
    ]),
  },
  methods: {
    verifyColumn(e) {
      if (isNaN(e.target.value) || e.target.value < 1) {
        this.$store.commit('columnError')
        this.$store.commit('columnSet', e.target.value)
      } else {
        this.$store.commit('columnGood')
        this.$store.commit('columnSet', e.target.value)
      }
    },
  }
}
</script>

Additionally, after changing the value to 5 in the text field and selecting this component in the dev tools (assigning it to $vm0), I get the following, showing that the state is indeed updated and accessible through the component, but that the computed property just isn't updating:

$vm0.$store.state.columnChoice
> "5"
$vm0._computedWatchers.columnChoice.value
> "1"

have you tried removing the setter from the computed property? — LShapz
Yep, same result. In the Vuex part of the dev tools, it shows an event and that the value changed, but when I go to the component parts of the devtools nothing's changed there. — Jared
what about using mapState as intended i.e. computed: { ...mapState('columnChoice'), } instead of using returning this.$store.state.columnChoice ? — LShapz
I tried that first actually, that didn't work either. Here's a link to the github branch if there's something else maybe I'm missing in another file: github.com/Sacmanxman2/csv-subtractor/tree/dev — Jared
"the computed property just isn't updating" 👈 which computed property would that be? — Phil

Jared Jared · Accepted Answer · 2018-10-17T21:02:50

Alright, I figured it out. Turns out in my index.html file I had been fetching a vue instance from a CDN in addition to using the one imported from NPM

VueJS - Components not updating when Vuex state updated

1 Answers