Vuex存储中的数据不会显示在vue组件中-Java 学习之路

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

当我使用computed：数据来自getter，组件被渲染后，DOM仍然是空的（直到我没有点击vue devtools中的组件 . 如果我点击，计算再次运行，并重新绘制元素并填充来自数据（））

如果我在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>

3 回答

1
为什么不只是有一个返回所需 Headers 的计算属性，它可以跟随记录here：
```
computed: {
  cardTitle: function() {
   var card = this.$store.getters.cards.find((card) => card.id == this.current)
   return card.title
  },
}
```
现在您可以在DOM中使用 {{this.cardTitle}} .
回复于 2024-04-29T21:55:30+08:00
1
Getting Vuex State into Vue Components

那么我们如何在Vue组件中显示商店内的状态？由于Vuex存储是被动的，从中“检索”状态的最简单方法是从计算属性中返回一些存储状态

在您的情况下，您有卡阵列处于vuex状态，并使用数据方法返回数组 . 这不是处理这种情况的正确方法 . 您需要使用 computed method 作为吸气剂 . 每当 this.$store.state.card 更改时，它将导致计算属性重新评估，并触发关联的DOM更新：
```
computed: {
    cardData() {
      return this.$store.getters.cards
    }
  }
```
在组件模板中，您可以显示来自cardData数组的属性，无论是 Headers ，内容，类型，ID等 . 您不需要为数组中的每个属性创建cardTitle，cardId，cardType变量，只需在cardData之后添加属性：
```
<template>
  <div class="card">
  <h1>{{ cardData.title }}</h1>
  <p>{{ cardData.content }}</p>
  </div>
</template>
```
这是jsFiddle示例为您的情况，按ID过滤了cardData数组 .
回复于 2024-04-29T21:55:30+08:00

如果使用v-for循环遍历数组，则更有效，如vue.js documentation homepage.所示

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

这个 . $ 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>

回复于 2024-04-29T21:55:30+08:00

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

3 回答

相关问题