[vuex] state field "foo" was overridden by a module with the same name at "foo"

[mspoulsen]

Version

3.1.2

Reproduction link

https://gist.github.com/mspoulsen/f3a67e22a76ba124e606a0beae597974

Steps to reproduce

Create a minimal store using the gist.
Then try to access store.state.foo

Result: We get Typescript error: Property 'foo' does not exist on type 'RootState'.

What is expected?

A Typescript error is expected

What is actually happening?

We get the Typescript error and that is the problem

---

How would I be able to access store.state.foo without adding foo to RootState? And if I do I get this warning in 3.1.2:
[vuex] state field "foo" was overridden by a module with the same name at "foo"

[ktsn]

Essentially duplicate of #1267

You can add your module state in RootState and cast the root state value to any as a work around.

[mspoulsen]

That wouldn't make the warning go away, right?

[ktsn]

Yes it will go away.

interface RootState {
  foo: {} // declare your module state
}

const rootState: any = {
  
}

const storeConfig: StoreOptions<RootState> = {
  modules: {
    foo: {}
  },
  state: rootState
}

const store: Store<RootState> = new Vuex.Store(storeConfig)

[mspoulsen]

That works, thanks! Can't wait for Vue3 and Typescript just working everywhere 🙂

[mcfarljw]

If you don't want to use any I also had luck overriding the object as the interface. Still not ideal but seemed to suppress the warning and typescript errors.

interface RootState {
  foo: {}
}

const rootState = {} as RootState