The constant issue persists with the NuxtJS store state variables continuously coming back as

Question

The constant issue persists with the NuxtJS store state variables continuously coming back as

I am facing an issue with the NuxtJs store where it keeps returning undefined. Even after looking at multiple similar questions, I haven't been able to find a solution. Here is my code snippet:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state(){ 
        return{
            count: 500
        }
    },
    getters: {
        getCount: (state) => {
            state.count
        }
    },
})

I attempted accessing it using this method:

this.$store.getters.getCount

I also tried the following approach:

computed: {
        ...mapGetters(['getCount'])
},
created(){
        console.log("count: "+this['getCount'])
}

Below is the error message: https://i.stack.imgur.com/pfFex.png

vue.js vuex nuxtjs

Answer 1

Answer №1

With Nuxt, the store is automatically set up for you, eliminating the need to create your own.

To simplify things, you can remove the setup code:

// REMOVE ALL THIS:
//
// import Vue from 'vue'
// import Vuex from 'vuex'
//
// Vue.use(Vuex)
//
// const store = new Vuex.Store({/*...*/})

Instead, create a store/index.js file with the following contents:

export const state = () => ({
  count: 500,
})

export const getters = {
  getCount: state => state.count,
}

Now, you can easily access the store in your components:

export default {
  mounted() {
    console.log('count', this.$store.getters.getCount)
  }
}

Check out the demo!

Answer 2

With Nuxt, the store is automatically set up for you, eliminating the need to create your own.

To simplify things, you can remove the setup code:

// REMOVE ALL THIS:
//
// import Vue from 'vue'
// import Vuex from 'vuex'
//
// Vue.use(Vuex)
//
// const store = new Vuex.Store({/*...*/})

Instead, create a store/index.js file with the following contents:

export const state = () => ({
  count: 500,
})

export const getters = {
  getCount: state => state.count,
}

Now, you can easily access the store in your components:

export default {
  mounted() {
    console.log('count', this.$store.getters.getCount)
  }
}

Check out the demo!

The constant issue persists with the NuxtJS store state variables continuously coming back as

Answer №1

Similar questions

Using the dot operator to load an image

Laravel VueJS Vuetable-2 without user authentication

The error message says: "Unable to access attributes of an unknown object ( 'ownerDocument' )"

Tips for creating a vertical scrollbar within a row component

How can I correctly implement a pinia store within another pinia store in Vue 3?

Vuetify: Dynamic v-select options based on user selection

After redirection to a new page, the Ionic-vue menu malfunctioned

Quasar framework's autocomplete feature failing to display text in dropdown list

An ELIFECYCLE error was encountered during the production deployment process, resulting in error number

Concealing Rows Once a Specified Threshold of Rows Has Been Modified

How to Retrieve Information from an Array in VueJS

The persistent issue of window.history.pushstate repeatedly pushing the identical value

The information transmitted from the Laravel controller is not syncing with the Vue variable as expected

React to the Vue: Only activate the event if the key is pressed twice consecutively

What is the method for customizing the background color in a .vue file using Bootstrap?

Developing a dynamic web application using the Django framework along with the Vue.js library and Highcharts for

The custom element is unfamiliar: Have you properly registered the component? Vue.js in Laravel

Vue js and axios make it easy to upload multiple files at once

The functionality of Jquery is successfully integrated into a specific function, however it seems to only work for one of the calls. To make the other call work,

Using nodemailer to send an email with a dynamic variable that holds the HTML content