How to register multiple plugins in vuex?

Question

I already was using the vue-persistedstate plugin in my project. Now I need vuex-pathify plugin as well.

for the persistentstate I prepare a constant including settings:

const persistedStates = [
    createPersistedState({
        key: process.env.PERSISTENT_COOKIE_NAME,
        paths: [
            'auth'
        ],
        storage: {
            getItem: key => JSON.stringify(cookies.get(key)),
            setItem: (key, value) => cookies.set(key, value, { path: '/', expires: '6h', secure: false }),
            removeItem: key => cookies.remove(key)
        },
    }),
    createPersistedState({
        key: process.env.PERSISTENT_COOKIE_NAME,
        paths: [
            'user',
        ],
    })
];

and then use it like:

const Store = new Vuex.Store({
    ...
    plugin: persistedStates;
    ...
})

now I need to add the pathify plugin as well. I tried

plugin: [persistedStates, pathify.plugin]

but it didn't work and returns an error (vuex.esm.js?94e4:368 Uncaught (in promise) TypeError: plugin is not a function). What am I missing?

Answer 1

The Vuex doc is pretty straight forward: https://vuex.vuejs.org/guide/plugins.html

const myPlugin = store => {
  // called when the store is initialized
  store.subscribe((mutation, state) => {
    // called after every mutation.
    // The mutation comes in the format of `{ type, payload }`.
  })
}

const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})