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

Question

在玩 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更新数据同步到屏幕的解释的好链接吗？

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

于尔根

Answer 1

这是错误的。

你不应该使用 var，因为它是一个全局变量。

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

进一步将其他两个函数移至导出对象中的方法。

Answer 2

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

<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。 猫数据将在添加后出现在数组中。而且，当我重新启动时，猫仍留在数据库中。 现在唯一的问题是，前端没有列出猫。 添加时和启动应用程序时都不会。 数据不会显示在前端。 有什么想法吗？

问候于尔根