question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No longer works with upgraded Vue and Vuex

See original GitHub issue

I am using vuex-persist@2.0.1

I recently upgraded vue and vuex. vue@2.6.10 vuex@3.1.0

Before the upgrade I had vuex-persist working perfectly, in my typescript project, with the provided documentation. After the upgrade, I now get an error in my Store. Here is my code:

const vuexAllModules = new VuexPersistence({
	storage: window.localStorage
});

export default new Vuex.Store<RootState>({
	strict: !config.isProd,
	modules: {
		module1,
		module2
	},
	state: {},
	getters: {},
	mutations: {},
	actions: {},
	plugins: [vuexAllModules.plugin] // <<<<-----SOURCE OF ERROR
});

ERROR

Type 'Plugin<unknown>[]' is not assignable to type 'Plugin<RootState>[]'.
  Type 'Plugin<unknown>' is not assignable to type 'Plugin<RootState>'.
    Types of parameters 'store' and 'store' are incompatible.
      Type 'Store<RootState>' is not assignable to type 'Store<unknown>'.
        Types of property 'registerModule' are incompatible.
          Type '{ <T>(path: string, module: Module<T, RootState>, options?: ModuleOptions | undefined): void; <T>(path: string[], module: Module<T, RootState>, options?: ModuleOptions | undefined): void; }' is not assignable to type '{ <T>(path: string, module: Module<T, unknown>, options?: ModuleOptions | undefined): void; <T>(path: string[], module: Module<T, unknown>, options?: ModuleOptions | undefined): void; }'.
            Types of parameters 'module' and 'module' are incompatible.
              Type 'Module<any, unknown>' is not assignable to type 'Module<any, RootState>'.
                Types of property 'actions' are incompatible.
                  Type 'ActionTree<any, unknown> | undefined' is not assignable to type 'ActionTree<any, RootState> | undefined'.
                    Type 'ActionTree<any, unknown>' is not assignable to type 'ActionTree<any, RootState>'.
                      Index signatures are incompatible.
                        Type 'Action<any, unknown>' is not assignable to type 'Action<any, RootState>'.
                          Type 'ActionHandler<any, unknown>' is not assignable to type 'Action<any, RootState>'.
                            Type 'ActionHandler<any, unknown>' is not assignable to type 'ActionHandler<any, RootState>'.
                              Type 'unknown' is not assignable to type 'RootState'.ts(2322)
index.d.ts(96, 3): The expected type comes from property 'plugins' which is declared here on type 'StoreOptions<RootState>'

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

7reactions
martijnbolandcommented, Aug 12, 2019

Try adding the generic parameter RootState to the VuexPersistence consructor

const vuexAllModules = new VuexPersistence<RootState>({

That worked for us

0reactions
nthxcommented, Jan 7, 2020

Check also if typescript was upgraded as well. It might be due to changes in it. For me it helped to downgrade typescript from 3.7. to 3.4.x (3.5.x introduced this error)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Migrating to 4.0 from 3.x - Vuex
Migrating to 4.0 from 3.x #. Almost all Vuex 4 APIs have remained unchanged from Vuex 3. However, there are still a few...
Read more >
Vuejs and Vuex not rendering updated array - Stack Overflow
Hello Alexander, and welcome to SO. Try moving the invocation of $store.getters.getCart to a computed function in the parent component. – ...
Read more >
Why Your Vue Component Isn't Updating (and how to fix it)
1. Check that variables are reactive · 2. Make sure to update Arrays and Objects correctly (only in Vue 2) · 3. Use...
Read more >
You Might Not Need Vuex with Vue 3 - DEV Community ‍ ‍
Vue 3 exposes its reactivity system through numerous functions. ... Vuex has more features like module handling, but sometimes we don't need ...
Read more >
How To Manage State in a Vue.js Application with Vuex
This is not ideal, since mutations should have one job and one job only: update the state. To differentiate between adding and removing...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found