使用原生脚本安全存储的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中使用原始代码时，它会更新cats。我应该改变什么？

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

你能解释一下这些变化吗?这样我就能理解了。

你有没有一个很好的链接来解释nativescript-vue更新数据同步到屏幕？

致以最良好的问候，并非常感谢您的帮助

尤尔根

Answer 1

这是错误的。

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

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

此外，将其他两个函数移动到导出对象中的方法。

Answer 2

谢谢Robertino，使用以下代码可以减少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。在add之后，cat数据将在数组中。而且，当我重新启动时，猫仍然留在数据库中。现在唯一的问题是，在前端没有列出猫。在添加或启动应用程序时都不会。数据不会显示在前台。有什么想法吗？

关于尤尔根