Nuxt / Vuex / Vue Reactivity Issue Increment

Question

Hi everyone I am I having some difficulty when working with Nuxt and Vuex.

I am trying to run through the example Vuex / Nuxt Classic Mode. https://nuxtjs.org/guide/vuex-store/

After clicking my increment button I dont see the number go up. My page just stays at 0, I can see within the console that the state knows the number is no longer 0 but not on the screen, as if it doesnt know to be reactive.

My assumption is that I have miss configured something somewhere and my 0 is not the actual state, but I created some copy of it somehow.

Here is my button within my template.

Here is my inc function within my methods.

inc () {
  this.$store.commit('increment')
},

Here is my computed

computed: {
  counter () {
    return this.$store.getters.counter
  }
}

Here is my Vuex/index.js file contained within the store folder.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const createStore = () => {
  return new Vuex.Store({
    state: () => ({
      counter: 0
    }),
    getters: {
       counter: state => state.counter
    },
    mutations: {
      increment (state) {
        state.counter++
      }
    }
  })
}

export default createStore

Commercial Photography

Update: Included more code snippets, and replied to existing comments.

@Boussadjra Brahim @xaviert, thank you both for weighing in, I appreciate the assistance.

@Boussadjra Brahim - Yes, I had tried using an action that called the mutation, that didnt seem to get me there either. I also tried adjusting the state via the action alone, and wasnt able to make any changes, however that seems correct, as I am under the impression that actions call mutations to make state changes and do not themselves do so, please correct me if you know more. I am 100% open to the idea that I did not attempt it correctly. Below is that action that didnt do anything and the one that called the mutation

actions: {
  increment (state) {
    state.counter++
  }
},

And here is the version with the action calling the mutation.

actions: {
  incrementCounterUp () {
    this.commit('increment')
  }
},

@xaviert - I have tried starting the server over, and have also tried to see if an nuxt build followed by a firebase serve, to see if maybe that helped. It did not. My normal server start is 'npm run dev'. In hopes that you/anyone else may be able to find my mistake below is my full _id.vue component and also my nuxt.config.js file as maybe that's it. Its still pretty raw and could use a lot of refactoring so hope you can sort through it well enough.

_.id.vue

Blake Geist · Accepted Answer

At the end of the day, I was not able to identify exactly what in my application was the error.

I assume that my during my initialization, configuration or development I touched something that should not have been touched, installed something that should not have be installed, messed with a package I should not have or was to bold in my nuxt.config.js changes.

I created a new nuxt app following the same install instructions. https://nuxtjs.org/guide/installation/

Moved the above _id.vue component exactly as it is and once I got dependencies updated it worked perfectly as seen in the image below.

Thank you very much @Boussadjra Brahim, @xaviert, @Andrew1325 for you assistance.

Nuxt / Vuex / Vue Reactivity Issue Increment

Answers (1)

Related Questions