Cats Example with nativescript secure storage do not update frontend - nativescript

Question

while playing around with the cats listview example from Raymond Camden
(thanks so much
[1]: https://nativescript.org/blog/client-side-storage-in-nativescript-applications/),
I try to store the data with the nativescript secure storage plugin.
In the cats.vue file I will show my code:
<template>
<Page class="page">
<ActionBar title="cats" class="action-bar" color="#ffbb00" />
<StackLayout class="home-panel">
<ListView for="cat in cats">
<v-template>
<Label :text="cat.name"></Label>
</v-template>
</ListView>
<Button #tap="addCat" text="Add Cat"></Button>
</StackLayout>
</Page>
</template>
<script>
const appSettings = require("application-settings");
var SecureStorage = require("nativescript-secure-storage").SecureStorage;
var secs = new SecureStorage();
var cats= [];
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function randomName() {
var initialParts = ["Fluffy","Scruffy","King","Queen","Emperor","Lord","Hairy","Smelly","Most Exalted Knight","Crazy","Silly","Dumb","Brave","Sir","Fatty"];
var lastParts = ["Saam","Smoe","Elvira","Jacob","Lynn","Fufflepants the III","Squarehead","Redshirt","Titan","Kitten Zombie","Dumpster Fire","Butterfly Wings","Unicorn Rider"];
return initialParts[getRandomInt(0, initialParts.length - 1)] + ' ' + lastParts[getRandomInt(0, lastParts.length - 1)];
}
function getCats() {
return secs.getSync({
key: "foo"
});
}
export default {
data() {
return {
cats: []
}
},
created() {
this.cats = getCats();
},
methods: {
addCat() {
cats = [{ "name":randomName()}, ...cats];
var success = secs.setSync({
key: "foo",
value: cats
});
this.cats = getCats();
}
}
};
</script>
<style scoped>
</style>
The problem is, I do not see any cats on the app screen, when I add a cat.
When I use the original code with the CouchDB, it updates the cats.
What should I change?
Also when the app starts, there are no visible cats which should be stored in another
start of the app. How may I load the data from the securestorage to the screen when the app starts?
May you please explain the changes, so that I can understand it?
Do you have good link with an explanation of nativescript-vue update the data synchronization to the screen?
Best regards and thank you very much for your help
Juergen

Answer 1

This is wrong.
You should not use var as it is a global.
Remove the var cats= [], leave it only in data, not outside the export.
Further more move your other two functions to the methods within the exported object.

Answer 2

Thanks Robertino,
with following code there are 2 problems less:
<script>
const appSettings = require("application-settings");
var SecureStorage = require("nativescript-secure-storage").SecureStorage;
var secs = new SecureStorage();
export default {
data() {
return {
cats: []
}
},
created() {
this.cats = this.getCats();
},
methods: {
addCat() {
this.cats = [{ "name":this.randomName()},...this.cats ];
//console.log("xxxxxxxxxxxxxxxxxxx:" + cats);
var success = secs.setSync({
key: "foo",
value: this.cats
});
this.cats = this.getCats();
console.log(`after get:${this.cats}`);
},
getCats() {
return secs.getSync({
key: "foo"
});
},
getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
randomName() {
var initialParts = ["Fluffy","Scruffy","King","Queen","Emperor","Lord","Hairy","Smelly","Most Exalted Knight","Crazy","Silly","Dumb","Brave","Sir","Fatty"];
var lastParts = ["Saam","Smoe","Elvira","Jacob","Lynn","Fufflepants the III","Squarehead","Redshirt","Titan","Kitten Zombie","Dumpster Fire","Butterfly Wings","Unicorn Rider"];
return initialParts[this.getRandomInt(0, initialParts.length - 1)] + ' ' + lastParts[this.getRandomInt(0, lastParts.length - 1)];
}
}
};
I see a nice console.log in the method addcat() after the getcat method.
The cat data will be in the array after an add. And, when I restart, the cats stayed in the database.
The only problem now is, no cats where listed in the frontend.
Neither when adding nor when starting the app.
The data will not be shown in the frontend.
Any ideas?
Regards Juergen