🔥 Vue Tips #22: Where do you put shared state?
Tags: vue, webdev, javascript, tutorial
Published: 2021-08-18 15:42:40

---
title: "🔥 Vue Tips #22: Where do you put shared state?"
published: true
description: "Conference season, sharing state between components, blockquotes, Wikimedia uses Vue, indirection, and destructuring in a v-for."
canonical_url: https://michaelnthiessen.com/weekly-022-august-18/
tags: vue, webdev, javascript, tutorial
series: Vue Tips
---

_This newsletter was sent out to my list on August 18, 2021. [Sign up here](https://michaelnthiessen.com/newsletter) 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`:
```html
// 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](https://techblog.wikimedia.org/2021/01/22/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](https://nuxtnation.com/) — September 15th — free and online
- [Vuejs Global (Amsterdam)](https://www.vuejs.amsterdam/) — October 1st and 4th — Amsterdam and online
- [Vue.js Conference (London)](https://vuejs.london/) — October 20-21 — London and online
- [VueConf Toronto](https://www.vuetoronto.com/) — 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`?
```html
<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:

```html
<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:
```html
<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:
```html
<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](michaelnthiessen.com/newsletter) 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](michaelnthiessen.com/newsletter)