具有nativescript安全存储的Cats示例不会更新前端

如何解决具有nativescript安全存储的Cats示例不会更新前端

在玩雷蒙德·卡姆登（Raymond Camden）的猫列表视图示例时 （非常感谢 [1]：https://nativescript.org/blog/client-side-storage-in-nativescript-applications/）， 我尝试使用nativescript安全存储插件存储数据。

在cats.vue文件中，我将显示代码：

<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>

问题是，当我添加一只猫时，我在应用程序屏幕上看不到任何猫。

当我在CouchDB中使用原始代码时，它会更新猫。 我应该改变什么？

此外，当应用启动时，没有可见的猫应该存储在另一只猫中 应用程序的启动。应用启动时如何将数据从安全存储加载到屏幕上？

请您解释一下这些变化，以便我能理解。

您是否有一个很好的链接，其中包含有关nativescript-vue的说明，可将数据同步更新到屏幕？

最诚挚的问候，非常感谢您的帮助

Juergen

解决方法

这是错误的。

您不应使用var，因为它是全局的。

删除var cats = []，仅将其保留在数据中，而不将其保留在导出之外。

再将其他两个函数移到导出对象中的方法上。

,

感谢罗伯蒂诺， 使用以下代码，少了两个问题：

<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)];
        }
    }
};

我在getcat方法之后的addcat（）方法中看到了一个不错的console.log。 添加后，cat数据将位于数组中。而且，当我重新启动时，猫就留在了数据库中。 现在唯一的问题是，前端没有列出猫。 无论是添加时还是启动应用程序时。 数据不会显示在前端。 有什么想法吗？

关于Juergen