🔥 (#67) One source of truth #

June 2022

Hey there!

Vue Tips Collection was a massive success!

Over 400 copies were sold, nearly 100 of them hardcovers. Absolutely insane! 🤯

Now I'm taking time to "refactor" some parts of my business and clean up some tech debt. After a big release, it's nice to go back, clean up, and improve things.

I wanted to get PayPal working before the launch, so the integration is a bit hacky right now. Actually, I'm manually fulfilling all PayPal orders currently. Definitely not the best experience for you, so I'm automating that part.

I also want to build a self-service invoice tool. There's no reason you should have to email me and wait for me to create one and then send it back. That can all be automated as well.

Not anything super exciting, but it saves us all time and headaches — especially me!

And it's so liberating that I can just write whatever tool I need to improve my business.

Software development is fun.

— Michael

🔥 Watching Arrays and Objects #

The trickiest part of using a watcher is that sometimes it doesn't seem to trigger correctly.

Usually, this is because you're trying to watch an Array or an Object but didn't set deep to true:

export default {
  name: 'ColourChange',
  props: {
    colours: {
      type: Array,
      required: true,
    },
  },
  watch: {
    // Use the object syntax instead of just a method
    colours: {
      // This will let Vue know to look inside the array
      deep: true,

      // We have to move our method to a handler field
      handler()
        console.log('The list of colours has changed!');
      }
    }
  }
}

Using the reactivity API from Vue 3 would look like this:

watch(
  colours,
  () => {
    console.log("The list of colours has changed!");
  },
  {
    deep: true,
  }
);

Here are the docs for Vue 3 and Vue 2 if you want to read more on this.

🔥 Why there must be one source of truth #

This is the most critical principle of state management that I know:

Each piece of state has a single owner, a single source of truth.

No one else is allowed to modify the state. It's just borrowed temporarily.

If you have an array in a Vuex store, only that Vuex store can update it. Anywhere in your app that needs that value must get it from the store (directly or through another component).

If the state is owned by a component, only that component can modify it. This means other components must emit an event to that component, which can then decide what it wants to do.

Why?

If you allow state to be modified from anywhere, your code becomes a tangled mess.

With a single source of truth, you can easily understand what's happening.

The best code is easily understood.

📜 Nuxt 3 State Management: Pinia vs useState #

In Nuxt 3 we get a new useState composable.

But how does it compare to Pinia?

In this article for Vue Mastery, I discuss the main differences and when to use each.

Read it here: Nuxt 3 State Management: Pinia vs useState

🐦 Discussion: Putting async logic in stores #

There was a great discussion on Twitter last week about putting async logic inside of Vuex/Pinia stores.

The replies I got were very interesting, and I have a lot to mull over now.

https://twitter.com/MichaelThiessen/status/1539636683187990528?s=20&t=ypNbws17ocbLF7w2CKhPxw

💬 Gall's Law #

"A complex system that works is invariably found to have evolved from a simple system that worked. The inverse proposition also appears to be true: A complex system designed from scratch never works and cannot be made to work. You have to start over, beginning with a working simple system." —John Gall

🧠 Spaced-repetition: Detect Clicks Outside an Element #

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.

Sometimes I need to detect whether a click happens inside or outside of a particular element. This is the approach I typically use:

window.addEventListener("mousedown", (e) => {
  // Get the element that was clicked
  const clickedEl = e.target;

  // `el` is the element you're detecting clicks outside of
  if (el.contains(clickedEl)) {
    // Clicked inside of `el`
  } else {
    // Clicked outside of `el`
  }
});

p.s. I also have two courses: Reusable Components and Clean Components

来源 #

原文 https://michaelnthiessen.com/weekly-067-june-29/

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。