How does this plugin handles object store variables?

[PrimozRome]

I am using vuex-persistedstate in my Nuxt.js projects. I am wondering how this Vuex plugin handles object variables inside my store? I am seeing strange behaviours.

Every time I hard-refresh my app [Command-R] my array inside store duplicates elements. Does this plugin adds values to store arrays?

My store is initialised like this:

import UsersTable from '@/assets/tables/users'

export const state = () => ({
  usersTable: UsersTable
})

So UsersTable is object like this:

export default {
  columns: [
    {
      name: 'profile.lastname',
      title: 'USER.LBL_LASTNAME',
      sortField: 'profile.lastname'
    },
    {
      name: 'email',
      title: 'USER.LBL_EMAIL',
      sortField: 'email'
    },
    {
      name: 'address.city',
      title: 'USER.LBL_CITY',
      sortField: 'address[0].city'
    }
  ]
}

Now after each refresh my store.usersTable.columns double... I am not sure what is happening here but I suspect that vuex-persistedstate plugin pushes values from local storage after the store get's initialised. Is this true?

If yes then this is questionable behaviour...? Anyone else having these problems?

[PrimozRome]

I have checked the source and seen that you somehow merge if saved state is object? This happens here.

Why is store variable not simply replaced from the saved state?

return function(store) {
    var savedState = shvl.get(options, 'getState', getState)(key, storage);

    if (typeof savedState === 'object' && savedState !== null) {
      store.replaceState(merge(store.state, savedState, {
        arrayMerge: function (store, saved) { return saved }
      }));
    }

    (options.subscriber || subscriber)(store)(function(mutation, state) {
      if ((options.filter || filter)(mutation)) {
        (options.setState || setState)(
          key,
          (options.reducer || reducer)(state, options.paths || []),
          storage
        );
      }
    });
  };

[robinvdvleuten]

@PrimozRome thanks for reporting the issue! Please see PR #89, that will probably fix your issue. For now I would recommend to use version 2.1.2.

[PrimozRome]

@robinvdvleuten ah I see.

What was the reason to use array merge instead of overwrite in later versions?

[robinvdvleuten]

@PrimozRome there was no reason behind it. I was looking for a replacement for lodash and thought that deepmerge mimicked the functionality. Apparently the state merging wasn't correctly covered by testcases and is popping up as an issue now. The PR fixes it and I will try to harden the plugin even more this week so hopefully issue #86 is fixed as well.

[PrimozRome]

@robinvdvleuten excellent! Looking forward on the upgrade and thanks for explanations.

[robinvdvleuten]

@PrimozRome You're welcome! Please open a new issue if you stumble upon something else.