Typescript issue when using Vue3 with Vuex4

Question

TS2345: Argument of type 'StoreOptions' is not assignable to parameter of type 'Plugin_2'. Property 'install' is missing in type 'StoreOptions' but required in type '{ install: PluginInstallFunction; }'.

const app = createApp(App)
app.use(store, key)
app.use(router)
app.use(...)
app.mount("#app")

store:

export interface RootState {}
const state: RootState = {}

export interface TypeState extends RootState {
  markdown: MarkdownState
  user: UserState
  fileTree: FileTreeState
  editor: EditorState
}

export const key: InjectionKey<Store<TypeState>> = Symbol("storeKey")
export const store: StoreOptions<RootState> = createStore({
  state,
  modules: {
    markdown,
    user,
    fileTree,
    editor,
  },
  plugins: [
    createPersistedState({
      paths: ["user", "fileTree", "markdown"],
    }),
  ],
})

export function useStore() {
  return baseUseStore(key)
}

Alimo · Accepted Answer · 2021-10-09 06:02:24Z

1

Try defining your store like this:

export const store = createStore<RootState>({
  // ...
});

The app.use method expects a Vue plugin as its first argument. A Vue plugin is an object with an install method. In this case, an instance of the Store class in Vuex.

As seen here, the createStore method's return type is a Store. Which is what you want. So there is no need to specify a type for your store variable. The only thing you need to do is to provide your state type to the createStore method like mentioned.

edited Oct 9, 2021 at 6:02

answered Oct 9, 2021 at 5:05

Alimo

5514 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript issue when using Vue3 with Vuex4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related