尝试在移动应用程序中使用 Vue 和 Sqlite 从现有数据库加载数据

Question

我有点赶时间。这是我的第一个 Nativescript Vue 项目。 Vue 是我的第一个，因为我知道它的性能优于 Angular。我试图研究加载填充的数据库，但我看到几个使用 Angular 的示例。（我从来没有用过 Angular）没有太多使用 Vue 填充数据库的 Sqlite 示例。所以我遇到了https://www.nativescript.org/blog/data-management-with-sqlite-and-vuex-in-a-nativescript-vue-app并尝试适应我的项目。

我正在尝试使用 Sqlite 从 airportTable 加载 faaID 和 airportName。两件事，1）如何让这个 TabViewItem 在单击特定选项卡后立即调用加载函数，以及 2）如何从该数据库加载所有数据并将其放入列表（现在我正在测试使用标签）...我的目标是将它放在列表视图中作为用户的选项 select。我的数据库 pilotvoice.db 在 ./app

你可以在https://github.com/stahlie/first-ns-app

看到我的项目

Answer 1

在你的 vuex 商店中添加一个 getter

getters: {
    allAirports(state, getters) {
        return state.data;
    },
},

在您的组件中，您可以像这样获取加载的数据

load() {
  // perhaps wrap the query action in a promise so you can do...
  this.$store.dispatch("query").then(() => {
      this.airports = this.$store.getters.allAirports;
  }); 
  console.log("Pressed load button");
},

Answer 2

显然，根据 https://github.com/NathanaelA/nativescript-sqlite/blob/master/src/README.md

我通过将 {from: "**/*.db"} 添加到 webpack.config.js

解决了这个问题

尝试在移动应用程序中使用 Vue 和 Sqlite 从现有数据库加载数据

Attempting to load data from existing database using Vue and Sqlite in mobile app

sqlite

mobile-application

vue.js

nativescript