Persist store throughout page reloads

What problem is this solving

To completely eliminate the need for Vuex, since Vuex has session persistence support via a plugin.

Proposed solution

Accept an extra object in the createStore initialization:

export const usePiniaStore = createStore({
	id: "simpleStore",
	state: () => ({
		simpleVariable: "",
	}),
	persistence: {
		enable: true,
		mode: "localSession"
	}
});

// type definition
interface IPiniaPersistence {
	enable: boolean,
	mode: "localSession" | "localStorage";		
}

Describe alternatives you’ve considered

There does not seem to be any Vuex-less alternatives out there that supports the vue-composition-api.

[posva]

An updated and simpler version is to use something like https://vueuse.org/core/uselocalstorage/#uselocalstorage:

defineStore('store', {
  state: () => ({
    count: useLocalStorage('count', 0)
  })
})

[posva]

Vuex doesn’t have persistence support, it comes from a plugin. For Pinia, it would be the same. This can be implemented by using store.$subscribe a watch(pinia.state, handler, { deep: true }) to write to local storage (or anything else) and watching localStorage for changes and writing back to the store.

Something along the lines of

// save the whole state
watch(pinia.state, (state) => {
  localStorage.setItem('state', JSON.stringify(state)
}, { deep: true })

// save cart store
watch(() => pinia.state.value.cart, (state) => {
  localStorage.setItem('cart', JSON.stringify(state)
}, { deep: true })

You can inspire yourself from https://github.com/robinvdvleuten/vuex-persistedstate/blob/master/src/index.ts to create it

There is also https://github.com/posva/pinia/issues/191 going on to discuss plugins, they will probably be similar to Vuex 5 plugins once that is discussed too