使用 Vuex 操作获取数据对象并在我尝试将数据放入这些对象时得到 "Uncaught (in promise) TypeError"

Question

我正在学习 Vuex，最近我正在学习它用来获取数据的操作。

一切似乎都正常，我可以访问我的电影对象，我可以 select 这个对象中的任何电影......但是一旦我想访问其中一部电影中包含的数据，就会出现错误消息唤醒我的控制台。

Vuex:

export default createStore({
  state: {
    films: []
  },

  mutations: {
    SET_FILMS(state, films) {
      state.films = films
    }
  },

  actions: {
    fetchFilms({ state, commit }){
        services_movieDB.getFilms('')
        .then(response => {
          commit('SET_FILMS', response.data.results)
        })
        .catch(error => console.log("error with api call getFilms() in CardFilms", error))
      }

    }
});

*services_movieDB 是一种使用 Axios.To 获取数据的服务，请把这个问题弄清楚，我会为你省去这部分：它有效。

分量：

<template>
  <section>
    {{ films[currentIndex] }} //it works: no error message
    {{ films[currentIndex] }} //it works: but 2 warnings and 1 error message in the console
    {{ currentFilm }} //isn't work
  </section>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "CardFilms",
  data() {
    return {
      currentIndex: 0,
      currentFilm: null
    };
  },
  computed: {
    ...mapState(["films"]),
  },
  beforeCreate(){
    this.$store.dispatch("fetchFilms")
    this.currentFilm = this.$store.state.films[this.currentIndex]
  },
};
</script>

警告：

[Vue warn]: Unhandled error during execution of render function 
  at <CardFilms> 
  at <Acceuil onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App> 
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <CardFilms> 
  at <Acceuil onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

错误：

Uncaught (in promise) TypeError: can't access property "title", _ctx.films[$data.currentIndex] is undefined

这真的是 Vue 内部错误？有人有解决办法吗？ VueJS 3 | Vuex 4

Answer 1

添加条件渲染（v-if），这样你就不会在没有数据的情况下渲染。

 <section v-if="currentFilm && films">

使用 Vuex 操作获取数据对象并在我尝试将数据放入这些对象时得到 "Uncaught (in promise) TypeError"

Fetching a data object with Vuex action and get "Uncaught (in promise) TypeError" when i try to take data into these object

javascript

vue.js

es6-promise

vuejs3

vuex4