VUE3 fetch data and use it in different files

Question

I have a fetch request in Home.vue file and I want to use the same data to another vue file (AllJobs.vue) with the same component(props). How I can achieve this without make a new fetch request in AllJobs.vue? I heard that I can use Pinia, but for a small project like this I wonder if it is a simpler solution?

Home.vue

  <div class="cards-container">
    <div v-for="job in jobs.reverse().slice(0, 5)" :key="job.id" class="">
      <JobComponent :position="job.position" :department="job.department" :location="job.location"/>
    </div>
  </div>
</template>

<script>
import JobComponent from '../components/JobComponent.vue'

export default {
  name: 'Home',
  components: { JobComponent },
  data() {
    return {
      jobs: [],
    }
  },
  mounted() {
  fetch("http://localhost:3000/jobs")
    .then(res => res.json())
    .then(data => this.jobs = data)
    .catch(err => console.error(err.message))
  }
}
</script>

AllJobs.vue

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

<script>
import JobComponent from '../../components/JobComponent.vue'

export default {
  name: "AllJobs",
  components: { JobComponent },
}
</script>

JobComponent.vue

  <div class="card">
    <div class="position">{{ position }}</div>
    <div class="department">{{ department }}</div>
    <div class="location">
      <span class="material-symbols-outlined">
        location_on
      </span>
      {{ location }}
    </div>
    <span class="material-symbols-outlined right-arrow">
      arrow_right_alt
    </span>
  </div>
</template>

<script>
export default {
  props: ['position', 'department', 'location'],

}
</script>

kissu · Accepted Answer · 2022-11-07 21:03:05Z

2

We don't know the structure of your files here, but you can use the following:

props to pass the state from parent to children 🔽
emits to lift the state up from child to parent 🔼
use a Store, like Vuex or Pinia to be able to have it globally available in your app
use composition API with Singleton State pattern
write the data into cookies/localStorage and get them where needed (also global)
event bus or similar approach can also be used but it's quite messy, especially since you already have the ones above
[more advanced patterns with Vue-query, swrv, Apollo etc...but they are quite more complex]

All of those depend on quite a lot of considerations, but not being part of your project will not allow us to give you a precise and exact answer.
Some research and questioning will be needed on your side further down the road.

edited Nov 7, 2022 at 21:03

answered Nov 7, 2022 at 20:57

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel · Accepted Answer · 2022-11-07 20:58:56Z

0

I heard that I can use Pinia, but for a small project like this I wonder if it is a simpler solution

The decision to use global state management is not only a matter of project size. If it solves the problem it's worth using.

You could also use composables to manage state globally, but you'd have to convert to setup function (well, not mandatory but ref/reactive works better within setup functions)

Another option is provide/inject, but the data is not reactive by default (so you need to use a reactive or ref)

answered Nov 7, 2022 at 20:58

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

Collectives™ on Stack Overflow

VUE3 fetch data and use it in different files

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related