Vue Reactive Storage for Capacitor.js
Reactive layer for interacting with localStorage from Vue 2 for Capacitor.js This project is a fork from https://github.com/AlexDicy/vue-reactive-localstorage#readme but adapted to Capacitor Storage API
Quick install
npm i capacitor-reactive-localstorage-vue
Why do you need it
Reactivity
window.localStorage
is not reactive if you use it directly with Vue, for example
if you want to use localStorage
in data
and you change a property it will not reflect
changes in your component.
Capacitor.js
According to Capacitor docs https://capacitorjs.com/docs/v3/guides/storage#data-storage-in-capacitor
Mobile OS’s may periodically clear data set in window.localStorage, so this API should be used instead.
This API will fall back to using localStorage when running as a Progressive Web App.
Compatible with Capacitor 3 starting from 2.0.0
How to use Vue Reactive Storage
import ReactiveStorage from "vue-reactive-localstorage";
// Set initial values
Vue.use(ReactiveStorage, {
"notes": "foo",
"lang": "foo",
"name": "foo",
"count": 1,
"userConfig": {
age: 10,
name: "fred"
}
});
Define vars that will be stored and proxied by Vue
(any other var in window.localStorage
that is not on this array will not be proxied).
Now you can acess the namespace storage
in Vue.
new Vue({
template: " <div> {{storage.notes}}, {{storage.lang}} ... </div> ",
created: function() {
this.storage.lang = "other value"; // will react on the view and on real localStorage (web) and persistent storage on mobile.
}
})