mrichar1 / jsonapi-vuex

Use a JSONAPI api with a Vuex store, with data restructuring/normalization.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

state should return function

saiqulhaq opened this issue · comments

let state = { [config['jvtag']]: {} }

I got warning on dev console
I have to modified my jv.js file to be like this to fix it

const jsonApi = jsonapiModule(api)

export default {
  ...jsonApi,
  state: () => {
    return jsonApi.state
  }
}

Can you provide the exact error, and what is reporting it? I can see that state could be a function, and there is support for this in the Vuex code, but I'm surprised that it is implying that using an object is 'wrong' when this is shown in all the docs - e.g. https://vuex.vuejs.org/guide/

I assume you creates jv.js just to implement this workaround, and that normally you are using jsonapiModule as a module in a new Vuex.store instance?

Can you show me the contents of your store.js and/or wherever you instantiate jsonapiModule - I can see why this warning might be occurring, but I'd like to be able to reproduce it for the test suite before implementing any code changes, and everything I've tried with namespaces, nested modules etc 'just works' in the testapp so far...

OK
it's like this

import axios from 'axios'
import humps from 'humps'
import { jsonapiModule } from 'jsonapi-vuex'
import { loadProgressBar } from 'axios-progress-bar'

const api = axios.create({
  baseURL: process.env.NUXT_ENV_API_URL,
  headers: {
 //
 },
  transformResponse: [
    ...axios.defaults.transformResponse,
    (data) => humps.camelizeKeys(data)
  ],
  transformRequest: [
    ...axios.defaults.transformRequest,
    (data) => humps.decamelizeKeys(data)
  ]
})

loadProgressBar({ showSpinner: true }, api)

const jsonApi = jsonapiModule(api)

export default {
  ...jsonApi,
  state: () => {
    return jsonApi.state
  }
}

Thanks for the update.

It looks like this is likely caused by importing and then 're-exporting' jsonapi-vuex. I assume somewhere else you are importing this module and then using it in new Vuex.store() - i.e something like:

import { jsonApi } from './jv'

export default new Vuex.Store({
  modules: {
    jv: jsonApi
  }
}

Do you have a specific reason for re-exporting like this, and not just using jsonapiModule 'directly' in Vuex.store() ?

it's because Nuxt architecture https://nuxtjs.org/guide/vuex-store/

Ah, haven't used Nuxt but given their docs expects state as a function, that seems a good enough reason to make the modification, since it shouldn't affect 'vanilla' Vuex users.

I'll see about getting that change done soon!

Done - please try upgrading to 4.4.0 and seeing if that fixes the error!

commented

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.