NativeScript Vue - VueX 不工作：TypeError：无法读取未定义的属性“状态”

如何解决NativeScript Vue - VueX 不工作：TypeError：无法读取未定义的属性“状态”

我正在尝试运行示例程序“在 NativeScript-Vue 应用程序中使用 sqlite 和 Vuex 进行数据管理” https://nativescript.org/blog/data-management-with-sqlite-and-vuex-in-a-nativescript-vue-app/

我收到以下错误，请帮助解决此问题。

An uncaught Exception occurred on "main" thread.
Unable to start activity ComponentInfo{org.nativescript.preview/com.tns.NativeScriptActivity}: 
com.tns.NativeScriptException: Calling js method onCreate Failed
TypeError: Cannot read property 'state' of undefined

StackTrace:
java.lang.RuntimeException: Unable to start activity 
ComponentInfo{org.nativescript.preview/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: 
Calling js method onCreate Failed
TypeError: Cannot read property 'state' of undefined
    at android.app.ActivityThread.performlaunchActivity(ActivityThread.java:3762)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3938)
    at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:85)
    at 
 android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135)
    at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2277)
    at android.os.Handler.dispatchMessage(Handler.java:106)
    at android.os.Looper.loop(Looper.java:246)
    at android.app.ActivityThread.main(ActivityThread.java:8425)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:596)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1130)
Caused by: com.tns.NativeScriptException: Calling js method onCreate Failed
TypeError: Cannot read property 'state' of undefined
    at com.tns.Runtime.callJSMethodNative(Native Method)
    at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1286)
    at com.tns.Runtime.callJSMethodImpl(Runtime.java:1173)
    at com.tns.Runtime.callJSMethod(Runtime.java:1160)
    at com.tns.Runtime.callJSMethod(Runtime.java:1138)
    at com.tns.Runtime.callJSMethod(Runtime.java:1134)
    at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:20)
    at android.app.Activity.performCreate(Activity.java:8183)
    at android.app.Activity.performCreate(Activity.java:8167)
    at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1309)
    at android.app.ActivityThread.performlaunchActivity(ActivityThread.java:3735)
    ... 11 more


 store.js is inside src folder.

   store.js : 
   import Vue from 'vue';
   import Vuex from 'vuex';

   Vue.use(Vuex);

    export default new Vuex.Store({
      state: {

        },mutations: {

          },actions: {
          }
         });

我在 src 文件夹中创建了一个文件夹存储，并在 store 文件夹中创建了 index.js 文件。代码是：

 import Vue from 'nativescript-vue';
 import Vuex from 'vuex';

    const sqlite = require( "nativescript-sqlite" );
       Vue.use(Vuex);

          const store = new Vuex.Store({
           state: {
            database: null,data: []
        },mutations: {
              init(state,data) {
                 state.database = data.database;
            },load(state,data) {
               state.data = [];
               for(var i = 0; i < data.data.length; i++) {
                   state.data.push({
                    firstname: data.data[i][0],lastname: data.data[i][1]
                    });
               }
               },save(state,data) {
                  state.data.push({
                    firstname: data.data.firstname,lastname: data.data.lastname
                 });
                },},actions: {
                 init(context) {
                   (new sqlite("my.db")).then(db => {
                db.execsql("CREATE TABLE IF NOT EXISTS people (id INTEGER 
         PRIMARY KEY AUTOINCREMENT,firstname TEXT,lastname TEXT)").then(id => {
                 context.commit("init",{ database: db });
             },error => {
                 console.log("CREATE TABLE ERROR",error);
               });
             },error => {
              console.log("OPEN DB ERROR",error);
              });
               },insert(context,data) {
            context.state.database.execsql("INSERT INTO people (firstname,lastname) VALUES (?,?)",[data.firstname,data.lastname]).then(id => {
            context.commit("save",{ data: data });
          },error => {
            console.log("INSERT ERROR",error);
            });
      },query(context) {
          context.state.database.all("SELECT firstname,lastname FROM people",[]).then(result => {
              context.commit("load",{ data: result });
            },error => {
              console.log("SELECT ERROR",error);
          });
      }
  }

});

Vue.prototype.$store = store;

module.exports = 商店； store.dispatch("init");

解决方法

在 main.ts 或 main.js 文件中尝试以下内容：

import store from "./store";
new Vue({
  store,render: h => h('frame',[h(App))]),}).$start();