x进行数据管理
我最近写了一篇关于在使用Vue的NativeScript应用程序中使用Vuex的教程。
js
JavaScript框架。
在本教程中，标题为Vue中的键值本地存储。
js与Vuex结合使用NativeScript应用程序，我们看到了一些使用键值存储的示例，该存储区使用了NativeScript的“应用程序设置”模块。
拥有键值存储对于某些情况非常有用，但是通常您会发现自己需要一些可以查询的内容，例如SQLite。
我们将通过在使用NativeScript + Vue构建的Android和iOS应用程序中使用本机SQLite，将我们的上一个教程更进一步。
js和Vuex用于状态管理。
如果您还没有看过我的上一篇文章，那么这篇文章并不是成功的必要条件，但是在学习Vuex和NativeScript中的存储时值得这样做。
为了使事情简单易懂，我们将创建一个使用NativeScript和Vue的新项目。
js。
为此，请从命令行执行以下命令：
上面的命令将初始化一个新的Vue。
具有NativeScript模板的js项目，安装直接的项目依赖项，然后在iOS上对其进行仿真。
但是，在使用Vue CLI进行创建的过程中，系统会询问您一些问题。
启用Vuex很重要，但是其他所有设置都可以保留为默认设置。
一旦
Vuex项目
项目已创建，我们尚不清楚。
我们需要安装一个本机插件，该插件将使我们为Android和iOS提供SQLite支持。
在命令行中，执行以下操作：
上面的命令将为NativeScript安装SQLite插件。
此时，我们可以开始向非常简单的应用程序添加逻辑。
如果您以前从未使用过Vuex，那么它是一种从单个位置管理应用程序状态的方法。
使用生成器创建项目时，我觉得就Vuex而言，它使事情变得过于复杂。
因此，在添加自己的Vuex逻辑之前，我们将对项目进行一些修改。
在项目的
src / store / index。
js 文件，包括以下JavaScript：
那么，什么改变了？
而不是在
src / store / index。
js 文件，我已经将模块中的内容直接包含在文件中。
现在，让我们弄清楚我们想要用Vuex完成什么。
SQLite插件是异步的，因此我们要在状态中维护一个打开的实例。
我们还希望保持数据库数据始终处于加载状态并准备就绪，这可以在state的属性中发生。
只要属性中存在这些命名约定，它们就没有特定的含义。
每当我们想要更改状态变量时，我们都需要进行突变。 但是，突变必须是同步的，因此我们也必须利用动作，这些动作可以是异步的。
那么，我们的突变会是什么样？
看一下以下内容：
上面的代码中我们有三种不同的变异。
我们有一个初始化，它将存储打开的数据库的状态。
当我们希望加载数据库数据时，我们可以遍历查询结果并将其存储为对象数组。
使用原始格式的SQLite数据并不是一件令人愉快的事情，但是将其作为JSON来使用非常容易。
最后，我们有一种将数据保存到状态的方法。
请记住，突变仅用于更改变量。
与数据库的实际交互将发生在以下操作中：
在动作部分，我们有三个不同的动作，每个动作最终都称为我们的一种变异。
该操作将打开数据库并执行查询以创建表。
创建表后，通过该方法将打开的数据库传递给突变。
插入信息时，数据将传递到操作并执行查询。
变量是我们在变量部分中打开的数据库。
传递的数据在我们的查询中用作参数，成功完成后，将被提交给我们的变异并将数据保存在状态中。
同样，我们可以查询数据库中的数据。
查询的结果将提交给我们的突变，因此可以从组件中访问它。
繁重的工作大部分是实际的SQL语句。
只需记住，是用于异步代码，而是用于同步。
还必须做一件事。
我们要确保在打开应用程序时初始化数据库。
为此，请将以下行添加到您的底部
src / store / index。
js 文件：
请注意，我们使用而不是调用我们的操作。
有了Vuex，我们可以从任何组件中开始使用它。
由于这是一个简单的应用程序，因此我们有两个用于创建组件的简单选项。
我们可以继续使用该项目的
src / components / Counter。
Vue
文件，或者我们可以将其重命名为更有意义的名称。
由于我们要存储人员数据，因此我将其重命名为
src / components / Person。
Vue
。
如果您决定重命名文件，只需确保在
src / main。
js 文件。
打开你的
src / components / Person。
vue 文件并包括以下内容：
我现在已经有目的地清除了该块，因此我们可以专注于该块。
在该块中，我们初始化了一些变量，这些变量将绑定到我们的HTML表单。
这些方法将绑定到一组按钮。
当我们调用该方法时，我们从表单中获取数据并将其发送到Vuex操作以存储到数据库中。
同样，当我们调用方法时，我们将调用适当的操作来获取数据。
最后，该函数将通过清除变量来清空表单。
这里没有什么太复杂的，因为Vuex为我们的SQLite数据库做了所有繁重的工作。
现在让我们看一下代码块：
我们页面的模板将是一个网格。
网格的第一行将是我们的表单，第二行将是我们数据库中的数据列表。
让我们先看一下顶部：
本质上，我们有一些输入字段和一些按钮。
输入字段绑定到我们通过属性初始化的变量，而按钮绑定到我们通过属性的方法。
我们在这里拥有的大多数都是没有真实逻辑的标准标记。
现在让我们看一下下半部分：
我们有一个简单的列表，该列表是根据商店中的数据填充的。
请记住，我们不仅将所有数据存储在数据库中，而且还将其保留为JSON。
您刚刚了解了如何在Vue中使用SQLite。
js与NativeScript应用程序。
不需要将Vuex与SQLite一起使用，但这是在处理数据时建议做的事情。
我们的示例很简单，因为它仅使用一个表和一些简单的查询，但是只需花费很少的精力，它就可以变得更加复杂。
如果Vue。
js不是您的难题，我还写了一个标题为“在NativeScript Angular移动应用程序中使用SQLite”的教程，该教程侧重于相同的概念，但使用Angular。
如果您想使用键值存储而不是SQLite，请确保查看我以前的文章。