🔥 Vue Tips #22: Where do you put shared state?

This newsletter was sent out to my list on August 18, 2021. Sign up here to get emails like this each week!

Hey!

Conference season is beginning, and you won't want to miss all the amazing talks coming up.

My favourite part of conferences is meeting new people (and reconnecting with friends). There isn't as much of that this year, but hopefully we can do more of that soon.

I have no plans to attend this year, but perhaps I'll get to meet you at one of these conferences next year!

— Michael

🔥 Where do you put shared state?

Let's say we have a Button component that toggles an Accordion open and closed by changing the variable isOpen.

But the Button component changes it's text between "Show" and "Hide" based on the same variable, isOpen:

// Parent.vue
<template>
  <!-- Both components need access to `isOpen`  -->
  <Button :is-open="isOpen" @click="toggleOpen" />
  <Accordion :is-open="isOpen">
    Some interesting content in here.
  </Accordion>
</template>

These two sibling components (because they are beside each other) need access to the same state, so where do we put it?

Answer: The lowest common ancestor!

Which, in this case, is the parent of both components.

Because state only flows down through props, shared state must be in a common ancestor. And we also want to keep state as close as possible, so we put it in the lowest common ancestor.

While this example may seem obvious to some, when the components sharing state are in separate components, in separate folders, it's harder to see that this is the solution.

Note: we also want to co-locate state with the logic that modifies it, so we have to put the toggleOpen method in the parent as well.

🔥 Blockquotes

This element is used for quotes that are outside of the main flow of an article.

Like this quote. Most browsers will indent this automatically, and most websites will add extra styling.

While you can use a div with some CSS, the <blockquote> element is the semantically correct way of doing this.

In markdown you can use > to get a blockquote.

📜 Using Vue at Wikimedia

In this article, Eric and Anne from Wikimedia discuss how they've adopted Vue over the last year (without using webpack!).

It's great to read about large, established, organizations taking on Vue and having success with it. Vue is here to stay, make no mistake about that!

Read it here: 2020: The Year in Vue

🗞 News: It's conference season!

We have four incredible conferences coming up in the next 3 months, all accessible online and two offering (limited) in-person experiences:

• Nuxt Nation — September 15th — free and online
• Vuejs Global (Amsterdam) — October 1st and 4th — Amsterdam and online
• Vue.js Conference (London) — October 20-21 — London and online
• VueConf Toronto — November 22-23 — free + online

💬 Indirection

"Any problem in computer science can be solved with another layer of indirection, except of course for the problem of too many indirections." — Bjarne Stroustrup

🧠 Spaced-repetition: Destructuring in a v-for

The best way to commit something to long-term memory is to periodically review it, gradually increasing the time between reviews 👨‍🔬

Actually remembering these tips is much more useful than just a quick distraction, so here's a tip from a couple weeks ago to jog your memory.

Did you know that you can destructure in a v-for?

<li
  v-for="{ name, id } in users"
  :key="id"
>
  {{ name }}
</li>

It's more widely known that you can grab the index out of the v-for by using a tuple like this:

<li v-for="(movie, index) in [
  'Lion King',
  'Frozen',
  'The Princess Bride'
]">
  {{ index + 1 }} - {{ movie }}
</li>

When using an object you can also grab the key:

<li v-for="(value, key) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  {{ key }}: {{ value }}
</li>

It's also possible to combine these two methods, grabbing the key as well as the index of the property:

<li v-for="(value, key, index) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  #{{ index + 1 }}. {{ key }}: {{ value }}
</li>

Exclusive tips and insights every week

Join 8135 other Vue devs and get exclusive tips and insights like these delivered straight to your inbox, every week.

You have great content in your emails. I seriously learn something from every one of them. — Titus Decali

Thanks for another beautiful tip 🙏 — Victor Onuoha

Loving these, and the spaced repetition — Mark Goldstein

Sign up here