NativeScript Vue - VueX 不工作：无法读取未定义的属性获取器

Question

I have a VueX module named auth .

Here is the module:

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;
    }
  } 
}

I've left out the actions and mutations for the sake of brevity. As you can see I have getters clearly defined. I register the module in my store.ts file like so:

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
  }
});

Now I wish to access the getters in a component so I tried mapGetters(['auth/loggedIn']) & mapGetters('auth', ['loggedIn']) in computed however I get errors for both. Here's what it looks like:

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

I even tried accessing the getter directly via this.$store.getters['auth/loggedIn'] however this did not work.

Any idea about what could be the issue?

EDIT: Here's the error after i run the tns preview command:

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

The issue was the import statement import Vue from "vue" in file store.ts

I changed it to import Vue from "nativescript-vue" and now things seem to work.

I've created an issue here 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/

Answer 2

You have to define your state correctly to make getters work.

so you must have state like this:

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

and then in your component:

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

and now you have access to your state with this.loggedIn

UPDATE

You must add store to your vue instance too:

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