【发布时间】：2022-01-13 10:55:23
【问题描述】：
我目前正在尝试学习 Vue JS，但从未接触过 Javascript。
所有的括号、箭头等都快把我逼疯了。
使用 Composition API，我遇到了一个无法通过 google 成功搜索的问题。
这是有效的：
setup() {
const store = useStore ();
const packagingdata = ref ([]);
const loadpackagingdata = async () => {
await store.dispatch (Actions.LOADPACKAGING_LIST, 10);
packagingdata.value = store.getters.getPackagingData;
return {
packagingdata,
}
我可以访问{{packagingdata}}。其中包含一个数组。
{{Packagingdata.products}}
确实有效
但是{{packagingdata.products [0]}} 不起作用。
但是当我像这样将它添加到 setup() 中时：
setup() {
const store = useStore ();
const packagingdata = ref ([]);
const getProducts = ref ([]);
const loadpackagingdata = async () => {
await store.dispatch (Actions.LOADPACKAGING_LIST, 10);
packagingdata.value = store.getters.getPackagingData;
getProducts.value = store.getters.getProducts;
};
return {
packagingdata,
getProducts
}
然后{{ getProducts }}返回我想要的，即使getter函数只是这样：
get getAddress() {
return this.packagingdata["products"][0];
}
那里发生了什么？ 我究竟做错了什么？我宁愿不为每个计算值创建 ref() 和 getterfunction。 计算的解决方案是什么？
最好的问候
【问题讨论】：
-
在组件中，我们通常为您要使用的每个 getter 创建一个计算对象。
-
我又试了一次，可能语法正确 const productdata = computed(() => { return store.getters.getProduct; });但是在加载我的打包数据之前计算的火灾，尽管我在打包数据加载操作上使用了同步/等待。这就是为什么我得到“对象中不存在键”的错误。
-
如果您认真学习 vue.js（或前端开发），我强烈建议您应该从学习基础知识（html、css 和 javascript）开始。相信我，花时间学习基础知识会对您有很大帮助。