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

Posted 2023-04-14

【中文标题】NativeScript Vue - VueX 不工作：TypeError：无法读取未定义的属性“状态”

【英文标题】：NativeScript Vue - VueX not working: TypeError: Cannot read property 'state' of undefined

【发布时间】：2021-05-31 03:48:33

【问题描述】：

我正在尝试运行示例程序“在 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 ComponentInfoorg.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 
ComponentInfoorg.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，并在 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");

【问题讨论】：

你能提供如何访问商店吗？

我已将位置和商店js代码添加到主票，请检查

【参考方案1】：

在 main.ts 或 main.js 文件中尝试以下操作：

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

【讨论】：

Main.js 已经有该代码 import Vue from 'nativescript-vue' import App from './components/App' import VueDevtools from 'nativescript-vue-devtools' import store from './store ' if(TNS_ENV !== 'production') Vue.use(VueDevtools) // 在构建 Vue.config.silent = (TNS_ENV) 时，当 --env.production NOT 设置时打印 Vue 日志=== 'production') Vue.registerElement( 'RadSideDrawer', () => require('nativescript-ui-sidedrawer').RadSideDrawer ) new Vue( store, render: h => h('frame', [ h(App)]) ).$start();