missing data in some modules

[byronferguson]

• vuex-persistedstate version: 3.2.0
• node version: 10.21.0
• yarn version: 1.22.5
• nuxt version: 2.14.12

Relevant code or config

export default ({ store, req }: Context): void => {
  createPersistedState({
    key,
    storage: {
      getItem: key => {
        // See https://nuxtjs.org/guide/plugins/#using-process-flags
        if (process.server) {
          const parsedCookies = cookie.parse(req.headers?.cookie ?? '{}');
          return parsedCookies[key];
        } else {
          return Cookies.get(key);
        }
      },
      // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
      setItem: (key, value) => Cookies.set(key, value, { expires: 365, secure: false }),
      removeItem: key => Cookies.remove(key),
    },
  })(store);
};

plugins: [
    { src: '~/plugins/persisted-state' },
],

What you did:

I hopefully correctly followed the provided guides to config client/server synchronization of the Vuex store.

Problem description:

Not all of my modules are populated with information beyond the initial state. All state changes are completed using proper mutations.

Suggested solution:

Good question

[NeuronButter]

Out of interest, how did you update your state inside modules? I ran into an issue, where Vue wouldn't properly update the state if the code looked like this:

const state = () => ({
})
const mutations = {
    UPDATE_AUTH(state, passed) {
        state.token = passed.token
        state.expire = passed.time
    }
}

instead of this:

const state = () => ({
    user: {}
})
const mutations = {
    UPDATE_AUTH(state, passed) {
        state.user.token = passed.token
        state.user.expire = passed.time
    }
}

I think if Vue doesn't know what's going to change to being with in state, I don't think it looks for changes.

[byronferguson]

The me state object isn't triggering updates in the plugin which propagate to the cookie value.

export function state(): FamilyState {
  return {
    me: null,
  };
}

export const mutations: MutationTree<FamilyState> = {
  [SET_ME]: (state: FamilyState, me: Family) => (state.me = me),
};

However, within this other module the token and user is being updated successful.

export const state = (): AuthState => {
  return {
    user: null,
    token: '',
  };
}

export const mutations: MutationTree<AuthState> = {
  UPDATE_USER: (state: AuthState, user: User): User => (state.user = user),
  UPDATE_TOKEN: (state: AuthState, token: string): string => (state.token = token),
};

I don't see any meaningful differences between these two modules.

[NeuronButter]

Considering that you're still on Vue 2, have you tried using the Vue Devtools and seeing if it picks up the mutation change? I don't TypeScript that well, but they look a bit different when it looks like you may be missing something (once again I don't know much about TypeScript), but it could be

[SET_ME]: (state: FamilyState, me: Family)/*: Family */ => (state.me = me)

that's' different.

Also, it could just be completely irrelevant idk I'm not the brightest with TypeScript

[byronferguson]

The mutation is recorded in the DevTools.