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

Question

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

当我加载需要一些数据的页面时，问题就出现了 即 like_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

这是一个固执己见的答案：使用来自lodash 的get。

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);
    },
  },
};