Vue 3 & Vuex 4 compatibility?

dfun90 commented 3 years ago

Hello there!
We are using vuex-persist in our application and are currently migrating to Vue 3 and Vuex 4. Are there any plans on adding support for Vue 3 and Vuex 4?

I tried to add the support on my own, but ran into issues:

Localforage throws an error Uncaught (in promise) DOMException: Failed to execute 'put' on 'IDBObjectStore': [object Array] could not be cloned.
- Workaround using the reducer function worked, but after each hard refresh (F5) the app didn't notice that the store data was there

dfun90 commented 3 years ago

I think the main issue here comes with defining the RESTORE_MUTATION. In the code snippet below it is using old Vue 2 syntax, using $set, which is no longer available in Vue 3. You also don't have access to this._vm either anymore. So there needs to be a different way to define the RESTORE_MUTATION.

this.RESTORE_MUTATION = function RESTORE_MUTATION(state: S, savedState: any) {
    const mergedState = merge(state, savedState || {}, this.mergeOption)
    for (const propertyName of Object.keys(mergedState as {})) {
        (this as any)._vm.$set(state, propertyName, (mergedState as any)[propertyName])
    }
}

Also, on another note regarding how to keep both Vue 2 and Vue 3 compatibility: There is a neat solution called vue-demi that allows you to build a library for both Vue 2 and 3. https://github.com/vueuse/vue-demi

thoasty-dev commented 3 years ago

Look at this issue / fix: https://github.com/championswimmer/vuex-persist/issues/224

It works for me totally fine.

chrisspiegl commented 2 years ago

I guess this would solve some issues with current vuex versions. Any chance for a new release anytime soon?

championswimmer / vuex-persist

Vue 3 & Vuex 4 compatibility? #235