Vue js 2 Persist a component's data *privately*

Question

I currently have a Vue.js 2 SPA using Vuex for inter-component communication and Vuex-persisted state to persist my shared state.

However, I want to persist a component's local private data.

I tried the package vue-persist and it persists the component data fine, however, the variables are not namespaced and therefore shared between all component instances. I want to persist each component's data separately.

Does anyone know how I can achieve these 2 things in my Vue.js 2.x app?

1) Persistence of my local data (so it survives a browser refresh).
2) The persisted data is not shared with other components (perhaps name-spaced for each component instance?).

Thanks!

Answer 1

I'm not familiar with vue-persist, but it looks like you can pass a store name as the second argument to $persist. Choose a unique store name for the component instance (this will vary depending on the component).

e.g.

created() {
  this.$persist(['foo'], 'my-comp:' + this.id);
}