vuex。无法访问对象变量

Question

看看我的vuex代码：

export default new Vuex.Store({
    state: {
        article: {},
        slug: '',
    },
    actions: {
        getArticleData(context, payload) {
            axios.get('/api/article-json', { params: {slug:payload } }).then((response) =>{
                context.commit('setArticleData', response.data.data);
            });
        }
    },
    getters: {
        articleLikes(state) {
            return state.article.statistic.likes;
        },
        articleViews(state) {
            return state.article.statistic.views;
        }
    },
    mutations: {
        setArticleData(state, payload) {
            state.article = payload;
        },
        setCurrentSlug(state, payload) {
            state.slug = payload;
        },
        setCurrentStatistic(state, payload) {
            state.statistic = payload;
        }
    }
})

代码的工作方式如下 - getArticleData 操作在文章对象中设置数据。在 create() hook 中设置 article opbject:

{
"id": 14,
"title": "Deserunt ea natus pariatur sunt eum voluptatem.",
"img": "https://via.placeholder.com/600/5F113B/FFFFFF/?text=LARAVEL:8.*",
"body": "  fugiat.",
"created_at": "1 месяц назад",
"comments": [
    {
        "id": 40,
        "subject": "Impedit inventore quis.",
        "body": "Qui rem ut beatae expedita nemo.",
        "created_at": "2 дня назад"
    },
    {
        "id": 41,
        "subject": "Nam et sit.",
        "body": "Dolor voluptas error eos quod.",
        "created_at": "2 дня назад"
    },
],
"tags": [
    {
        "id": 1,
        "label": "Ut"
    },
    {
        "id": 3,
        "label": "Fugiat"
    },
],
"statistic": 
    {
        "likes": 7,
        "views": 153
    }
}

这个对象由Laravel资源

形成

public function toArray($request)
    {
        return [
            'id' => $this->id,
            'title' => $this->title,
            'img' => $this->img,
            'body' => $this->body,
            'created_at' => $this->createdAtForHumans(),
            'comments' => CommentResource::collection($this->whenLoaded('comments')),
            'tags' => TagResource::collection($this->whenLoaded('tags')),
            'statistic' => new StateResource($this->whenLoaded('state')),
        ];
    }

我无法从 getter 访问 article.statistic.views 和 article.statistic.likes。

在视图组件中我有代码

computed: {
        viewsNumber() {
            return this.$store.getters.articleViews;
        },
    }

和模板

<template>
   <span class="badge bg-danger">{{viewsNumber}} <i class="far fa-eye"></i></span>
</template>

这是我的控制台错误

app.js?id=80d6f0783c93a26b57e1:20787 [Vue warn]: Error in render: "TypeError: Cannot read property 'views' of undefined"

found in

---> <ViewsComponent> at resources/js/components/ViewsComponent.vue
       <ArticleComponent> at resources/js/components/ArticleComponent.vue
         <Root>

app.js?id=80d6f0783c93a26b57e1:22054 TypeError: Cannot read property 'views' of undefined

对于 comments 和 tags 没问题。在评论组件中我可以访问评论^

computed: {
        article() {
            return this.$store.state.article;
        },
    },

<div v-for="comment in article.comments">
    <div class="toast showing" style="min-width: 100%;">
        <div class="toast-body">
            {{comment.body}}
        </div>
     </div>
</div>

article.statistic.likes 和 article.statistic.views 有什么问题？

Answer 1

问题是它无法验证 views 或 likes 是否会在 articles.statistic 中可用。您不确定 articles.statistic 的定义或不定义的位置。

所以简单的解决方案是在访问 articles.statistic

的任何子元素之前进行检查

例如您可以重新定义您的方法，如 -

....

getters: {
        articleLikes(state) {
            if(state.article.statistic){
                return state.article.statistic.likes;
            } else {
                return ...
            }
        },
        articleViews(state) {
            if(state.article.statistic){
                return state.article.statistic.views;
            } else {
                return ...
            }
        }
    },
....

vuex。无法访问对象变量

vuex. Can't get access to object variable

object

vue.js

vuex