VUE组件的VUEX

Question

我有一个VUE组件JobComponent.vue，我使用VUEX从jobs.js获取数据。当我在Home.vue中使用这个组件时，我只想在反向模式下呈现它5次，最后5项从最后一项开始。现在，它呈现7次，因为v-for来自JobComponent.vue.。

JobComponent.vue

<div v-for="job in allJobs" :key="job.id" class="card">
    <div class="position">{{ job.position }}</div>
    <div class="department">{{ job.department }}</div>
    <div class="location">
      <span class="material-symbols-outlined">location_on</span>
      {{ job.location }}
    </div>
    <span class="material-symbols-outlined right-arrow">arrow_right_alt</span>
    <span @click="deleteJob" class="material-symbols-outlined right-arrow">delete</span>
  </div>

Home.vue

  <div class="cards-container">
      <JobComponent />
  </div>

jobs.js

const state = {
    jobs: [
        {
            position: "2",
            department: "2",
            location: "2",
            id: 2
          },
          {
            position: "3",
            department: "3",
            location: "3",
            id: 3
          },
          {
            position: "4",
            department: "4",
            location: "4",
            id: 4
          },
          {
            position: "5",
            department: "5",
            location: "5",
            id: 5
          },
          {
            position: "6",
            department: "6",
            location: "6",
            id: 6
          },
          {
            position: "7",
            department: "7",
            location: "7",
            id: 7
          }
    ]
};

在VUEX之前，我在我需要的每个VUE文件中获取数据之前，我使用了Before ()和反向()方法。

Answer 1

您可以将allJobs定义为vuex getter，并将计算属性用于所需的内容。

computed: {
  allJobs() {
    return this.$getters.allJobs.reverse().slice(0, 5);
  }
}