无法读取未定义 NUXT 的属性“子字符串”

Question

我在使用存储中对象中的对象的 html 标记中遇到问题。

当我刷新我的页面时，我的 sotre 中的数组是空的，所以当我在索引页面中刷新时，它将首先加载 html，然后是 mounted 方法，它是我填充商店的地方。它说 Cannot read property 'substring' of undefined

index.vue 我使用这个对象：

          <p v-html="pegaPrimeiroPost.conteudo.substring(0,500)"></p>

index.vue 的导出默认值：

  computed: {
    ...mapGetters({
      postsDB: "postagensDB/pegaPosts",
      pegaPrimeiroPost: "postagensDB/pegaPrimeiroPost",
    }),
  },
  methods: {
    ...mapActions({
      buscaPostDB: "postagensDB/pegaPostsDB",
    }),
  },
  async mounted() {
    **await this.buscaPostDB();**
    });
  },

这个对象 pegaPrimeiroPost 是我从我的数据库中填充的数组中的一个对象。

存储/邮资数据库：

import axios from 'axios'

export const state = () => ({
    posts: [],
    primeiroPost: {},
})

export const getters = {
    pegaPosts(state) {
        return state.posts;
    },
    pegaPrimeiroPost(state) {
        return state.primeiroPost;
    },

}

export const actions = {
    async pegaPostsDB(state) {
        await axios
            .get("http:/MY_API_ADRESS")
            .then((response) => {
                state.commit('carregaStatePosts', response.data)
            })
            .catch((response) => {
                console.log(response)
            });
    },

}

export const mutations = {
   async carregaStatePosts(state, postsDB) {
        state.posts = postsDB.posts;
        state.primeiroPost = state.posts[0];
    },
}

如果我删除 substring() 方法，重新加载页面，那么它将填满我的存储；然后重新添加子字符串（），它可以工作，但不能解决我的问题。谁能帮帮我？

Answer 1

我从未使用过 Vue，但这听起来您有某种填充对象的异步操作，但您的默认值（在异步调用完成之前使用）没有该属性。如果它不存在，最快的解决方案可能只是给它一个值：

(pegaPrimeiroPost.conteudo || '').substring(0,500)

或使用该属性设置一个“默认”对象：

export const state = () => ({
    posts: [],
    primeiroPost: { conteudo: '' },
})