I'm currently developing a hybrid app using Nuxt JS, Cordova, and Cordova Native Storage (essentially localstorage).
During the process of saving an object to native storage and retrieving it on page load within the mounted() method, I keep encountering a recurring error regardless of my attempts to access the object data:
[Object Object]
The JavaScript code in the component that is loaded on every page is as follows:
import { mapState } from 'vuex';
export default {
mounted () {
document.addEventListener("deviceready", this.getNativeStorage(), false)
},
methods: {
getNativeStorage() {
window.NativeStorage.getItem("beacon_native_storage", (value) => {
var parseObj = JSON.parse(value)
alert(parseObj)
alert(parseObj.localStorage)
}, (error) => {
alert(`Error: ${error.code}-${error.exception}`)
});
},
refreshNativeStorage(currentState) {
window.NativeStorage.initWithSuiteName("beacon");
window.NativeStorage.setItem("beacon_native_storage", JSON.stringify(currentState), () => {
alert('Stored currentState')
}, (error) => {
alert(`Error: ${error.code}`)
});
}
},
computed: {
state () {
return this.$store.state
}
},
watch: {
state: {
handler: function (val, Oldval) {
setTimeout(function () {
this.refreshNativeStorage(this.state)
}.bind(this), 10)
},
deep: true
}
}
}
Furthermore, the object retrieved from Vuex is structured like this:
export const state = () => ({
pageTitle: 'App name',
dataUrls: [],
intervalData: [],
settings: [],
experimentalFeatures: [],
customAlertSeen: false,
user: null,
account: null,
payloadOutput: null
})
Each time the getItem function runs, the alert(parseObj) always displays [Object Object] instead of the actual data. And when trying to access specific properties such as parseObj.localStorage.pageTitle which are clearly defined in store/localStorage.js, it returns undefined.
I am puzzled by where I might be making mistakes in this implementation. Any guidance would be greatly appreciated.