Question

Vuex存储有一个getter，它按id返回对象。但是我不能使用来自getter的数据。

当我使用computed时：数据来自getter，在呈现组件之后，DOM仍然为空（直到我没有点击vue devtools中的组件。如果我单击，计算再次运行，并且元素被重绘并且填充了data（）的数据

如果我在定义data（）对象期间直接调用getter，则可以立即看到DOM中的{{ cardData.content }}，但this.cardData.title会返回错误Cannot read property 'title' of undefined。为什么？

Vuex存储

export const store = new Vuex.Store({
    state: {
        "cards": [
            {
                "position": null,
                "title": "Head Text",
                "id": 132,
                "content": "LoremIpsum",
                "type": "text",
            },
            {
                "position": null,
                "title": "Head Text 2",
                "id": 138,
                "content": "LoremIpsumLoremIpsum",
                "type": "text",
            }
        ]
    },

    getters: {
        cards: (state) => state.cards
    }
});

vue组件，

<template>
<div>
  <h1>{{ cardTitle }}{{ cardTitle2 }}</h1>
  <div>{{ cardData.content }}</div>
</div>
</template>


<script>
  export default {
    props: ['id'],
    data() {
      return {
        cardData: this.$store.getters.cards.find((card) => card.id == this.id),
        cardTitle: this.cardData.title,
        cardData2: null,
        cardTitle2: null
      }
    },
    computed: {
      GetData: function() {
        this.cardData2 = this.$store.getters.cards.find((card) => card.id == this.current);
        this.cardTitle2 = this.cardData2.title;
      },
    } 
  }

</script>

Answer 1

为什么不只是拥有一个返回所需标题的计算属性，它可以跟随记录here：

computed: {
  cardTitle: function() {
   var card = this.$store.getters.cards.find((card) => card.id == this.current)
   return card.title
  },
}

现在您可以在DOM中使用{{this.cardTitle}}。

Answer 2

将Vuex状态转换为Vue组件

那么我们如何在Vue组件中显示商店内的状态？由于Vuex商店是被动的，因此最简单的方式是检索＆＃34;州从它只是从计算机内返回一些商店状态属性

在您的情况下，您的卡阵列处于vuex状态，并且您使用数据方法返回数组。这不是处理这种情况的正确方法。您需要使用计算方法作为getter。每当this.$store.state.card发生更改时，它都会导致计算属性重新评估，并触发关联的DOM更新：

 computed: {
    cardData() {
      return this.$store.getters.cards
    }
  }

在组件模板中，您可以显示cardData数组中的属性，无论是标题，内容，类型，ID等。您不需要为数组中的每个属性创建cardTitle，cardId，cardType变量，只需在cardData后添加属性：

<template>
  <div class="card">
  <h1>{{ cardData.title }}</h1>
  <p>{{ cardData.content }}</p>
  </div>
</template>

以下是您的案例jsFiddle示例，按ID过滤了cardData数据。

Answer 3

如果使用v-for循环遍历数组，效率更高vue.js documentation homepage.

computed: {
     cards () {
          return this.$store.getters.cardData
     }
}

this。$ store.getters.cardData in calculated是你在getter中初始化的东西：即

getters: {
    cardData: (state) => state.cards
}

并表示如此：

state: {
    cards: []
}

然后在你的模板标签中，你可以循环遍历数据集数组：

<template id="insert id here">
    <ul v-for"card in cards" :key="card.id">
       <li> {{ card.title }}</li>
       <li> {{ card.content }}</li>
    </ul>
</template>

来自Vuex存储的数据不会显示在vue组件中

3 个答案: