fix: state objects don't work with submodules

[andrewvasilchuk]

🐛 The bug
I get the following issue during invocation of useAccessor function.

const storePattern = {
  state,
  mutations,
  modules: {
    foo,
  },
}

const store = new Vuex.Store(storePattern)

export const accessor = useAccessor(store, storePattern)

Uncaught TypeError: Cannot set property foo of #<Object> which has only a getter

🛠️ To reproduce
Try to invoke useAccessor with any module, which state declared as plain object.

🌈 Expected behaviour
I expect the correct module registration.

ℹ️ Additional context
Add any other context about the problem here.

[danielroe]

@andrewvasilchuk Fancy a repro? 🤞 I'm looking at the test code here, for example, and not seeing any issue with useAccessor and modules.

[andrewvasilchuk]

@danielroe, Getting this issue when state is not typeof 'function'.

[danielroe]

@andrewvasilchuk Is this an error from TypeScript or a bug in the behaviour of the accessor? (I'm reading your report as the former.) I also take it that you are not using Nuxt?

[andrewvasilchuk]

@danielroe, It's a runtime bug. I am not using Nuxt.js, so state is not a function.

[danielroe]

Thanks. It's definitely bad behaviour. Though I recommend a function, the accessor should definitely support a simple object.

Will investigate.

[andrewvasilchuk]

@danielroe, Yes, a function solved the issue.

[danielroe]

If you have submodules defined, Vuex actually mutates the state object passed in - so that when the accessor is created, it gets a state object that is different from the one passed to Vuex.

For the moment, that means if you want to use typed-vuex you'll need to use a state function, which doesn't suffer from this kind of mutation by Vuex. I'll consider whether there is a simple way to enable state object usage.

[andrewvasilchuk]

@danielroe, Thanks for the quick and comprehensive answer.