如果您曾经构建过Vue.js应用程序,无论是Web应用程序还是移动应用程序,您在搜索数据存储相关信息时可能会遇到Vuex。当涉及到Web时,围绕Vuex的常见教程包括浏览器本地存储或类似的,其中Vuex处理组件之间的所有状态规则。

随着NativeScript支持Vue.js截至目前,这会在什么我们能为移动开发做门,但我们如何处理这些情况下的数据?NativeScript不使用浏览器,因此不能选择本地存储。

我们将看看如何在使用NativeScript和Vue.js构建的Android和iOS移动应用程序中管理数据。该应用程序将利用Vuex和NativeScript内置的应用程序设置模块的强大功能

在我们进入代码之前,让我们退后一步,找出我们提出的每个模块在使用NativeScript构建移动应用程序时提供给我们的内容。

根据Vue.js网站,Vuex可以描述如下:

Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行变更。


有许多不同的方法可以在NativeScript应用程序中存储数据。对于此示例,我们将使用在Android和iOS上使用的应用程序设置模块实现的键值存储。在以后的教程中,我们将探讨如何使用SQLite或类似的东西。

SharePreferences

NSUserDefaults

本教程实际上受到了我读过的一个网络教程的启发,标题为Vue:在Vuex Store中使用localStorage

使用支持Vuex的Vue.js项目创建NativeScript

为了使本教程取得成功,您需要在计算机上安装和配置NativeScript以及NativeScript文档中概述的Vue CLI 。创建项目的命令如下:

vue init nativescript-vue/vue-cli-template vuex-project
cd vuex-project
npm install
npm run watch:ios

上面的命令将创建一个名为vuex-project的项目,该项目具有必要的依赖项。创建项目时,请确保在提示时启用Vuex,因为它将使我们的生活更轻松。默认值适用于配置过程中的所有其他提示。

定义Vuex状态逻辑

现在我们已经创建了一个带有Vue.js项目的NativeScript并准备好了,我们可以专注于开发用于管理应用程序状态的Vuex逻辑。在我看来,创建一个新项目时使用的生成器有点不稳定。出于这个原因,我们将反对该模板,以便与我们在网络上看到的Vue.js相匹配。

在项目的src / store / index.js文件中,包含以下JavaScript:

import Vue from 'nativescript-vue';
import Vuex from 'vuex';
import * as ApplicationSettings from "application-settings";

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        firstname: "",
        lastname: ""
    },
    mutations: {
        load(state) {
            if(ApplicationSettings.getString("store")) {
                this.replaceState(
                    Object.assign(state, JSON.parse(ApplicationSettings.getString("store")))
                );
            }
        },
        save(state, data) {
            state.firstname = data.firstname;
            state.lastname = data.lastname;
        }
    }
});

Vue.prototype.$store = store;

module.exports = store;

在我们讨论上述内容之前,我怎么提到我改变了什么。我没有引用src / store / index.js文件中的模块,而是直接在文件中包含了模块中的内容。

那么上面的代码中发生了什么?

首先,我们定义可以在我们的商店中管理的数据。我们将要管理这个例子的名字和姓氏信息,这很简单。默认情况下,数据将为空。

我们定义了两个可用于改变应用程序状态的突变。

load(state) {
    if(ApplicationSettings.getString("store")) {
        this.replaceState(
            Object.assign(state, JSON.parse(ApplicationSettings.getString("store")))
        );
    }
},

load

变异将首先检查以前是否有任何东西保存在我们称之为

store

密钥的位置。为了保持我们的数据灵活,我们不希望仅限于

state

变量中存在的内容。相反,如果先前保存了数据,我们将使用状态中存在的内容和存储中存在的内容的合并副本替换当前状态。该

replaceState

功能是Vuex API的一部分。

save(state, data) {
    state.firstname = data.firstname;
    state.lastname = data.lastname;
}

save

突变将采取致力于突变的数据并将其保存在我们的状态中。您会注意到我们实际上并没有将任何数据保存到Vuex控制器中的存储,但我们可以。相反,实际的保存将通过我们组件中的订阅进行。

使用数据要求在NativeScript中构建Vue.js组件

我们希望看到Vuex魔术在行动,我们还希望实际持久化数据,而不是仅仅在应用程序打开和使用时进行管理。出于这个原因,我们需要处理我们的组件。

在创建项目时,您可能有一个src / components / Counter.vue文件。您可以重命名,保持原样,也可以创建新文件。这是一个例子,所以我们的命名约定并不重要,但我们不会计算任何东西。

打开组件并包含以下代码:

<template></template>

<script>
    import * as ApplicationSettings from "application-settings";
    export default {
        data() {
            return {
                input: {
                    firstname: "",
                    lastname: ""
                }
            }
        },
        mounted() {
            this.$store.subscribe((mutations, state) => {
                ApplicationSettings.setString("store", JSON.stringify(state));
                this.input.firstname = state.firstname;
                this.input.lastname = state.lastname;
            });
        },
        methods: {
            save() {
                this.$store.commit("save", this.input);
            },
            load() {
                this.$store.commit("load");
            },
            clear() {
                this.input.firstname = "";
                this.input.lastname = "";
            }
        }
    };
</script>

您可以看到我暂时删除了

<template>

内容,因为我们希望专注于内容。简而言之,这个组件将有一个表单和三个按钮。我们可以保存表单的内容,加载表单的内容,或清除表单的内容。表单将允许输入名字和姓氏。

<script>

首先,我们要在

data

方法中初始化变量。接下来,当应用程序安装时,我们想订阅我们的Vuex商店。这是实际储蓄发生的地方。每当我们的商店更改时,此订阅会触发,然后会保留我们的状态并设置表单内容。请记住,这不是保存数据的唯一策略。

methods: {
    save() {
        this.$store.commit("save", this.input);
    },
    load() {
        this.$store.commit("load");
    },
    clear() {
        this.input.firstname = "";
        this.input.lastname = "";
    }
}

save

方法将调用

save

我们的Vuex文件中的变异。我们将表单输入传递给此突变。该

load

方法将调用

load

Vuex文件中的变异。最后,该

clear

方法将根据UI消除我们的表单,而不是保存的数据。

现在让我们看看

<template>

我之前消失的情况:

<template>
    <Page class="page">
        <ActionBar class="action-bar" title="Person"></ActionBar>
        <StackLayout class="form">
            <StackLayout class="input-field">
                <Label text="First Name" class="label font-weight-bold m-b-5" />
                <TextField class="input" v-model="input.firstname" />
                <StackLayout class="hr-light"></StackLayout>
            </StackLayout>
            <StackLayout class="input-field">
                <Label text="Last Name" class="label font-weight-bold m-b-5" />
                <TextField class="input" v-model="input.lastname" />
                <StackLayout class="hr-light"></StackLayout>
            </StackLayout>
            <GridLayout rows="auto, auto" columns="*, *">
                <Button text="Save" @tap="save" class="btn btn-primary" row="0" col="0" />
                <Button text="Load" @tap="load" class="btn btn-primary" row="0" col="1"  />
                <Button text="Clear" @tap="clear" class="btn btn-primary" row="1" col="0" colSpan="2"  />
            </GridLayout>
        </StackLayout>
    </Page>
</template>

<template>

我们有两个表单字段,使用核心NativeScript主题设置样式。它们使用

v-model

属性绑定到我们在块中定义的数据。我们按钮上的每个事件都会调用相应的功能。

<script>

@tap

如果您更改了文件名或创建了我之前提到的新文件,请不要忘记更新项目的src / main.js文件。

结论

你只看到了如何使用Vuex,并与创建的持久性本地存储在Android和iOS应用的形式NativeScript和Vue.js. 就像我之前提到的,有很多方法可以在NativeScript中保存数据,但通用性是,在管理方面,您可能会使用Vuex。