NativeScript Vue - VueX 不工作:无法读取未定义的属性获取器
Posted
技术标签:
【中文标题】NativeScript Vue - VueX 不工作:无法读取未定义的属性获取器【英文标题】:NativeScript Vue - VueX not working: cannot read property getters of undefined 【发布时间】:2020-08-25 21:05:34 【问题描述】:我有一个名为 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;
为了简洁起见,我省略了动作和突变。如您所见,我有明确定义的吸气剂。我在我的 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
);
现在我希望访问组件中的吸气剂,所以我尝试了 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 ComponentInfoorg.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 ComponentInfoorg.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
【问题讨论】:
你没有展示 store.ts 是如何使用的。 你从 vuex 导入 mapGetters 了吗? @ezero 是的,我确实从 vuex 导入 mapGetters @EstusFlask store.ts 的使用方式是什么意思? 问题应该包含***.com/help/mcve,但目前没有。我的意思是,如果你没有正确使用 store.ts,store 将不会正确地提供给 Vue 实例。我想这就是发生的事情。 【参考方案1】:问题是文件store.ts
中的导入语句import Vue from "vue"
我将其更改为 import Vue from "nativescript-vue"
,现在似乎一切正常。
我在这里创建了一个问题https://github.com/NativeScript/NativeScript/issues/8570,因为按照官方网站建议的入门步骤添加了错误的导入:https://nativescript-vue.org/en/docs/getting-started/quick-start/
【讨论】:
【参考方案2】:您必须正确定义您的状态才能使getters
工作。
所以你必须有这样的状态:
state:
user: null,
status:
loggedIn: true
,
然后在你的组件中:
computed:
...mapGetters(loggedIn: "auth/loggedIn")
,
现在您可以通过 this.loggedIn
访问您的状态
更新
您也必须将 store 添加到您的 vue 实例中:
const app = new Vue(
el:'#app',
store, // here
)
【讨论】:
你添加store
到vue实例吗?
是的,你认为是因为我的 store.ts 导入的是 vue 而不是 nativescript-vue 吗?
是的,我不使用nativescript-vue
,我没有意识到这一点。以上是关于NativeScript Vue - VueX 不工作:无法读取未定义的属性获取器的主要内容,如果未能解决你的问题,请参考以下文章
带有 Vuex 和 Axios 的 NativeScript-Vue 未定义状态错误
NativeScript Vue nativescript-sqlite 无法分配给“#<Object>”的只读属性“exports”对象