如何在计算方法和 mapState 的数组中分配动态参数

Question

你好，这是我的计算方法：

computed:
    mapState({
    aftermovie: (state) => state.festival.aftermovies[id]
  }),
    id: {
      set() { return this.$route.params.id}
    },

如果我输入 state.festival.aftermovies [0] 它有效但是如果我尝试在 url 中获取 id，id 未定义，你能帮我吗

Answer 1

我认为问题是您无法访问 this 或 mapState 中的其他计算属性，请尝试以下操作：

computed: {
  ...mapState({
    aftermovies: (state) => state.festival.aftermovies
  }),
  id() {
    return this.$route.params.id
  },
  aftermovie() {
    return this.aftermovies[this.id]
  }
}

Answer 2

非常感谢，是的，我们确实无法访问 mapState 中的 this 这是功能解决方案：

data() {
    return {
    // -1 because the aftermovie index is 1 and the index in the array starts at 0
      id: this.$route.params.id - 1
    }
  },
  computed:
    mapState({
      aftermovies: (state) => state.festival.aftermovies
    }),

最后访问数据

<template>
  <div>
    <div class="container text-center">
      <div>
        {{ aftermovies[this.id].id }}
        {{ aftermovies[this.id].name }}
        {{ aftermovies[this.id].video }}
      </div>
    </div>
  </div>
</template>

如何在计算方法和 mapState 的数组中分配动态参数

how to assign a dynamic parameter in an array in the computed method and mapState

vue.js

vuex

computed-properties

mapstatetoprops