VueJS/nuxt 'state' should be a method that returns an object in store/store.js

Question

I'm new to VueJS and confused about the warning from nuxt:

'state' should be a method that returns an object in store/store.js

So, my store.js contains the following (yes im trying the tutorial from the documentation):

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


Vue.use(Vuex);
export const store = new Vuex.Store({
  state() {
    return {
      todos: [
        { id: 1, text: '...', done: true },
        { id: 2, text: '...', done: false }
      ]
    };
  }
});

export default store;

Isn't state a method which returns an object? Or did i misunderstood the message?

update:

I also tried the following:

state: () => ({
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
}),

But this will give me the same warning.

Eliathan

Not sure which tutorial you're following but your store code seems significantly different from what's described in the Nuxt documentation: nuxtjs.org/guide/vuex-store – Weil

Answer 1

If you are using Nuxt they expect a store/index.js to create a store and the format should be like:

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment (state) {
    state.counter++
  }
}

As you are creating a store/store.js file, that will be treated as a module and might not work as you expect. I strongly recommend to create a store/index.js and follow the docs from Nuxt.

Judsonjudus

ah, ok, now its working without warnings. thank you for the hint – Eliathan

I don't follow, what do I put in ./store/index.js? – Courses

You should put the code above in ./store/index.js. – Judsonjudus

Answer 2

Try this

Use export const store

import Vuex from 'vuex'
import user from './modules/user'

export const store = new Vuex.Store({
  modules: {
    user
  }
})

Undirected

That's what I'm doing and I still get this error. – Courses

Answer 3

If you don't want to make a store/index.js then simply replace the state with this syntax, it will remove your warning. It worked for me as well.

export const state = () => ({
  cart: {
    booking: null,
    reservations: [],
  },
});

Goniometer

Answer 4

const getDefaultState = () => {
    return {
        aaa: ""
    }
}

export const state = () => ({
    ...getDefaultState()
})

Finish

Thank you for posting this answer. While this code may answer the question, might you please edit your post to add an explanation as to why/how it works? This can help future readers learn and apply your answer. You are also more likely to get positive feedback (upvotes) when you include an explanation. – Droit