NativeScript Vue - VueX 不工作：无法读取属性未定义的吸气剂

Question

我有一个名为 auth 的 VueX 模块。

这是模块：

export const auth = {
  namespaced: true,
  state: {
   user: null,
   status: {
    loggedIn: true
   }
  },
  actions: {

  },
  mutations: {

  },
  getters: {
    currentUser(state) {
      return state.user;
    },
    loggedIn(state) {
      return state.status.loggedIn;
    }
  } 
}

为了简洁起见，我省略了动作和突变。如您所见，我明确定义了 getter。我像这样在我的 store.ts 文件中注册模块：

import Vue from 'vue';
import Vuex from 'vuex';
import { auth } from './store/auth.module.js';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  },
  modules: {
    auth
  }
});

现在我想访问组件中的 getter，所以我在计算中尝试了 mapGetters(['auth/loggedIn']) 和 mapGetters('auth', ['loggedIn'])，但是我都遇到了错误。这是它的样子：

computed: {
    ...mapGetters(['auth/loggedIn'])
}

我什至尝试通过 this.$store.getters['auth/loggedIn'] 直接访问 getter，但这没有用。

知道问题出在哪里吗？

编辑： 这是我运行 tns preview 命令后的错误：

Webpack compilation complete. Watching for file changes.
Webpack build done!
Project successfully prepared (android)
Start sending initial files for device Nexus 6P (2e6517cd-cc2c-45a8-8915-525d6e437822).
Successfully sent initial files for device Nexus 6P (2e6517cd-cc2c-45a8-8915-525d6e437822).
LOG from device Nexus 6P: [Vue warn]: Error in created hook: "TypeError: Cannot read property 'getters' of undefined"
LOG from device Nexus 6P: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> CreateElement(NativeFrame)'
LOG from device Nexus 6P: 
LOG from device Nexus 6P: 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 'getters' 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 'getters' of undefined
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2817)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2892)
    at android.app.ActivityThread.-wrap11(Unknown Source:0)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1593)
    at android.os.Handler.dispatchMessage(Handler.java:105)
    at android.os.Looper.loop(Looper.java:164)
    at android.app.ActivityThread.main(ActivityThread.java:6541)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)
Caused by: com.tns.NativeScriptException: Calling js method onCreate failed
TypeError: Cannot read property 'getters' 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:6975)
    at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1213)
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2770)
    ... 9 more

Answer 1

您必须正确定义状态才能使 getters 正常工作。

所以你必须有这样的状态：

  state:{
    user: null,
    status: {
      loggedIn: true
    }
  },

然后在您的组件中：

  computed: {
    ...mapGetters({loggedIn: "auth/loggedIn"})
  },

现在您可以使用 this.loggedIn

访问您的状态

更新

您也必须将商店添加到您的 vue 实例中：

const app = new Vue({
  el:'#app',
  store, // here
})

Answer 2

问题是文件 store.ts

中的导入语句 import Vue from "vue"

我将其更改为 import Vue from "nativescript-vue"，现在似乎一切正常。

我在这里创建了一个问题 https://github.com/NativeScript/NativeScript/issues/8570 as the wrong import is added by following suggested getting started steps in the official website here: https://nativescript-vue.org/en/docs/getting-started/quick-start/

NativeScript Vue - VueX 不工作：无法读取属性未定义的吸气剂

NativeScript Vue - VueX not working: cannot read property getters of undefined

javascript

vue.js

vuex