Question

我目前正在vue的卡片组件上建立一个赞按钮。我正在使用页面上的中间件从firebase提取数据，以调度vuex操作，该操作将继续进行，并获取将其liked_posts存储在数组中的用户信息。

出现问题，当我加载需要一些数据的页面时也就是说，liked_posts而我的状态为空，则抛出错误 “ undefined” 。

如何确保即使用户未登录或从未访问过我的用户数据也不会导致错误

我试图将Vuex存储区中的操作更改为异步操作并使用await，以便确保数据在那里，但无济于事。
发生的是以下计算属性中的代码试图访问数组中尚不存在的对象。

likedOrNot() {
              const likeInfo = this.$store.state.userInfoSub[0].liked_posts
              return likeInfo.includes(this.$store.state.loadedCards[0].id)
              }

该数据尚不存在，因为用户尚未登录，因此存在。一旦他们这样做并且中间件正在调度一个操作来获取用户数据，则userInfoSub将充满信息。

当用户尚未登录或未触发中间件来查找放入cookie的用户时，我的基本状态如下所示。

所以我需要确保我缺少的userInfoSub不会破坏我的计算机属性

loadedCards:Array[1]
0:Object
token:null
user:null
userInfoSub:Array[0]
username:null

Answer 1

这是一个自以为是的答案：使用get中的lodash。

npm i lodash

然后您可以编写如下内容：

import get from 'lodash/get';

export default {
  computed: {
    isLiked() {
      const cardId = get(this.$store, 'state.loadedCards[0].id');
      const postIds = get(this.$store, 'state.userInfoSub[0].liked_posts', []);
      return postIds.includes(cardId);
    },
  },
};

如何确保尚未提取的数据不会破坏我的网站

1 个答案: