[Vuejs]-Vue best practices. What should I pass as prop to a component

by

1👍

✅

  1. Passing whole data will make the your Task component independent from store.
  2. Passing only ids of tasks will make your Task component dependent on store for tasks data.

Since Task is representing a single card, I think making it dependent on the store will increase the calls to the store since n number of tasks will call store for data.

It is better to get the data from store once and then enumerating the data using v-for directive and passing whole task object to your Task component.

👤Neel Bhanushali

0👍

So you can pass it however you like. Keep in mind, if you’re using Vuex, you don’t need to pass anything as a prop since you have a central source of truth. Instead, you can call straight from the state or use a getter.

Inside your child component, you can refer to the store with $store in the template and this.$store in the script.

For example:
const myTasks = this.$store.state.tasks (if tasks is an array or collection of some sort)

const myTask = this.$store.state.tasks[0]

Then you have myTask.id, myTask.label, etc.

If you need a more specific example, please post more code and let me know.

👤Arc

Leave a comment