Vue & Vuex getter 数组过滤器仅导致在线错误

Posted 2023-02-23

【中文标题】Vue & Vuex getter 数组过滤器仅导致在线错误

【英文标题】：Vue & Vuex getter array filter causes error online only

【发布时间】：2020-07-27 12:16:17

【问题描述】：

我无法让前端呈现我的计算属性。无论我在最后几天尝试了什么，它都失败了。本地一切都很好，在线我得到了错误。 有人遇到过这个问题吗？看来你不能用 array.filter 做一个基于另一个 getter 的 getter ！？

Vuex index.js

    state: 
    posts: [],
,

我的吸气剂

  posts: state => state.posts,
postsNews: state => 
    return state.posts.filter(post => post.category.description === 'News').slice(0, 3);
,

计算

 computed: 
    ...mapGetters(['postsNews', 'posts']),

前端

       <div v-if="posts && posts.length" class="hidden md:flex  flex-wrap -mx-2    mt-5">
                <div class="flex flex-wrap">
                    <ArtikelCard class="cursor-pointer w-1/2"
                                 v-for="(post, index) in postsNews" :key="index"
                                 :post="post"/>
                </div>
            </div>

我的突变：

   [SET_POSTS] (state, payload) 

    state.posts = payload;
,

我的行动

    getPosts ( commit, getters , payload = '') 
    commit(TOGGLE_LOADER,  condition: true );

    axios.get(`$API/posts/paginated?$payload`, headers(getters))
        .then(response => 
            commit(SET_POSTS, response.data.data);
            console.log(response.data.data);

        ).catch(error => 
        unauthenticated(error.response.status, commit);
        commit(TOGGLE_LOADER,  condition: false );
        consoleDev('getPosts', error);
    )
        .finally(() => commit(TOGGLE_LOADER,  condition: false ));
,

错误...

chunk-vendors.433933fc.js:7 TypeError: Cannot read property 'description' of null
at app.9a6615b5.js:1
at Array.filter (<anonymous>)
at postsNews (app.9a6615b5.js:1)
at O.t._wrappedGetters.<computed>.t._wrappedGetters.<computed> (chunk-vendors.433933fc.js:13)
at kr.<anonymous> (chunk-vendors.433933fc.js:13)
at nr.get (chunk-vendors.433933fc.js:7)
at nr.evaluate (chunk-vendors.433933fc.js:7)
at kr.postsNews (chunk-vendors.433933fc.js:7)
at Object.get [as postsNews] (chunk-vendors.433933fc.js:13)
at a.n.<computed> (chunk-vendors.433933fc.js:13)

【问题讨论】：

错误告诉你post.category返回null：你确定state.posts是一个对象数组，它又包含一个名为category的属性/键？如果它是通过对端点/API 的调用来填充的，请检查它是否确实返回了预期的有效负载。

看来你不能用 array.filter 基于另一个 getter 来制作 getter - 你可以。无论问题是什么，它都源于分配了posts 的位置，而不是您发布的代码。

请看原帖中的附加输出信息

【参考方案1】：

在本地运行 - 控制台

(35) […, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, __ob__: Observer]

Console output locally

  …, …, …, …, …, …, …, …, …, …, …, …, …, …, __ob__: Pt]

0: ID： （...） 文件： （...） 文件类型： （...） 文件转换：（...） 标题： （...） 蛞蝓：（...） 文本： （...） 预览文本：（...） 外部链接： （...） 作者： （...） 类别：对象 ID： （...） 描述：“软件” 蛞蝓：（...） 持续的： （...） color_code: (...)

但在网上却没有——这就是我如此恼火的原因。除非我部署到登台，否则找不到问题：

chunk-vendors.433933fc.js:7 TypeError: Cannot read property 'description' of null
at app.eea11d3b.js:1
at Array.filter (<anonymous>)
at postsNews (app.eea11d3b.js:1)
at O.t._wrappedGetters.<computed>.t._wrappedGetters.<computed> (chunk-vendors.433933fc.js:13)
at kr.<anonymous> (chunk-vendors.433933fc.js:13)
at nr.get (chunk-vendors.433933fc.js:7)
at nr.evaluate (chunk-vendors.433933fc.js:7)
at kr.postsNews (chunk-vendors.433933fc.js:7)
at Object.get [as postsNews] (chunk-vendors.433933fc.js:13)
at a.n.<computed> (chunk-vendors.433933fc.js:13)