Nuxt.js: Proper way to create a store

[askhat]

Me and my counterpart are working on the same project. And today we encountered a peculiar issue.

I'm sitting on MacOS with Node 7.10, and I have instantiated store this way:

const store = {
  state: { data: [] },
  mutations: {
    addData: state => payload => state.data.unshift(...payload)
  }
}

export default store

And everything works as intended. Even without importing and instantiating Vuex.

While my counterpart, on Ubuntu 16.10 with Node 7.7.6, gets an error with the same setting.

Nuxt.js Error:

Error: [nuxt] store/index.js should export a method which returns a Vuex instance.
    at getModule (.nuxt/store.js:53:10)
    at Object.module.exports.Object.defineProperty.value (.nuxt/store.js:16:14)

When in attempt to fix the issue I red an official example, and, instead of store object, I made a function which returns new store instance as example suggests:

import Vuex from 'vuex'

const store = () => {
  return new Vuex.Store({
    state: { data: [] },
    mutations: {
      addData: state => payload => state.data.unshift(...payload)
  })
}

export default store

The real fun begun here. The 'official' way does not work on my machine and causes store to be undefined.

I'm so much confused, I'd be very glad if anyone explain me what is going on.

Thank you in advance!

_{This question is available on Nuxt.js community (#c647)}

[pi0]

@askhat You seem using classic store mode. You may modify your original code to something like this:

const store = {
  state: () => { data: [] },
  mutations: {
    addData: state => payload => state.data.unshift(...payload)
  }
}

export default store

[askhat]

@pi0 well, effectively putting function into state causes same error: it's undefined. I've tried a regular function () statement and an arrow function.

Now I'm not even sure which one is undefined store or state.

[Kylart]

Have you tried this way ?

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    data: []
  },
  mutations: {
    ...
  }
})

export default store

Moreover, are the both of you on the same nuxt version ?

[Atinux]

Hi @askhat

You need to export a createStore method, I will update the warning to be more explicit.

See the official example: https://github.com/nuxt/nuxt.js/blob/dev/examples/vuex-store/store/index.js

[Atinux]

See https://github.com/nuxt/nuxt.js/commit/29d2751940bb01b39d584d21c67d2ccddda64845

[askhat]

I didn't noticed that in mine package.json, nuxt was locked on 0.10.7 and I didn't pushed it on remote, so my counterpart had [email protected], which, now I see, requires store to return an instance.

Case close, thank you everyone!

[Atinux]

My bad, no need to name it createStore. It works perfectly, see: https://glitch.com/edit/#!/nuxt-1-hello-world

Demo: https://nuxt-1-hello-world.glitch.me/

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.