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

Question

Vuex 存储有一个 getter which returns object by id。但是我不能使用 getter 中的数据。

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

的数据

如果我在定义data()对象时直接调用getter，DOM中的{{ cardData.content }}可以立即看到，但是this.cardData.title returns 一个错误 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

为什么不直接计算属性 returns 想要的标题，它可以按照记录 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 组件

So how do we display state inside the store in our Vue components? Since Vuex stores are reactive, the simplest way to "retrieve" state from it is simply returning some store state from within a computed property

在你的例子中，你有 vuex 状态的卡片数组，你使用数据方法 return 数组。这不是处理这种情况的正确方法。您需要使用 计算方法 作为 getter。每当 this.$store.state.card 发生变化时，都会导致计算出的属性变为 re-evaluate，并触发关联的 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

如 vue.js documentation homepage.

中所示，如果使用 v-for 遍历数组，效率会更高

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

this.$store.getters.cardData in computed 是你在 getters 中初始化的：即

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 组件中不显示

Data from Vuex storage are not displayed in the vue component

vue.js

vue-component

vuex

vuejs2