Ausnahme gefangen: SSL certificate problem: certificate is not yet valid ๐Ÿ“Œ Adding Pinia to Nuxt 3 ๐Ÿ (2023)

๐Ÿ  Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeitrรคge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden รœberblick รผber die wichtigsten Aspekte der IT-Sicherheit in einer sich stรคndig verรคndernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch รผbersetzen, erst Englisch auswรคhlen dann wieder Deutsch!

Google Android Playstore Download Button fรผr Team IT Security



๐Ÿ“š Adding Pinia to Nuxt 3 ๐Ÿ (2023)


๐Ÿ’ก Newskategorie: Programmierung
๐Ÿ”— Quelle: dev.to

Introduction

In this post, we'll introduce Pinia, a powerful package for managing your Nuxt app's state in a single place.

Whether you're new to state management solutions or experienced with libraries such as Vuex and Redux, Pinia is definitely worth checking out.

State management

If you've ever found yourself aimlessly trying to manage state through props and events, then the idea of a store may sound appealing:

  • Manage an app's state from a single, centralised store
  • Update and retrieve data through simple actions and getters
  • Subscribe to changes to achieve deep reactivity without much work

This helps to make changes to the app's state predictable and more consistent.

For example, we can store a counter, and then increment it from anywhere by using its store:

Demo of counter component

Pinia

Pinia is a state management library for Vue, with an officially-supported module for Nuxt 3 (@pinia/nuxt). It's also the recommended solution for Vue and Nuxt projects.

Don't just take it from me:

"Pinia is de facto Vuex 5!"

โ€” Evan You, creator of Vue (source)

What makes it useful for Vue and Nuxt applications?

  • Deep reactivity by default
  • No explicit mutations (all changes are implicit mutations)
  • Analogous with Options API:
    • Actions (equivalent of methods)
    • Getters (equivalent of computed)

Installation

Official documentation for using Pinia with Nuxt can be found here.

Install the package:

yarn add @pinia/nuxt

Add the module to your Nuxt configuration:

// nuxt.config.ts

export default defineNuxtConfig({
  // ...
  modules: [
    // ...
    '@pinia/nuxt',
  ],
})

Creating a store

Stores are created in a stores/ directory, and defined by using Pinia's defineStore method.

In this example, we have created a store (useCounterStore) and given the store a name (counter). We have then defined our state property (count) with an initial value.

// stores/counter.ts

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
})

It's as simple as that!

Using the store

Pinia offers a few ways to access the store and maintain reactivity.

1. Store instance

In your component's setup(), import the store's useStore() method.

// components/MyCounter.vue

import { useCounterStore } from '@/stores/counter'

export default defineComponent({
  setup() {
    return {
      store: useCounterStore(),
    }
  },
})

You can now access state through the store instance:

// components/MyCounter.vue

<template>
  <p>Counter: {{ store.count }}</p>
</template>

2. Computed properties

To write cleaner code, you may wish to grab specific properties. However, destructuring the store will break reactivity.

Instead, we can use a computed property to achieve reactivity:

// components/MyCounter.vue

export default defineComponent({
  setup() {
    const store = useCounterStore()

    // โŒ Bad (unreactive):
    const { count } = store

    // โœ”๏ธ Good:
    const count = computed(() => store.count)

    return { count }
  },
})
// components/MyCounter.vue

<template>
  <p>Counter: {{ store.count }}</p>
</template>

3. Extract via storeToRefs()

You can destructure properties from the store while keeping reactivity through the use of storeToRefs().

This will create a ref for each reactive property.

// components/MyCounter.vue
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/counter'

export default defineComponent({
  setup() {
    const store = useCounterStore()

    // โŒ Bad (unreactive):
    const { count } = store

    // โœ”๏ธ Good:
    const { count } = storeToRefs(store)

    return { count }
  },
})
// components/MyCounter.vue

<template>
  <p>Counter: {{ store.count }}</p>
</template>

Actions

Adding an action

Actions are the equivalent of methods in components, defined in the store's actions property.

// stores/counter.ts

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
})

Using an action

In your component, extract the action from the store.

// components/MyCounter.vue

export default defineComponent({
  setup() {
    const store = useCounterStore()
    const { increment } = store
    const count = computed(() => store.count)
    return { increment, count }
  },
})

The action can easily be invoked, such as upon a button being clicked:

// components/MyCounter.vue

<template>
  <button type="button" @click="increment"></button>
</template>

Getters

Getters are the equivalent of computed in components, defined in the store's getters property.

Adding a getter

Pinia encourages the usage of the arrow function, using the state as the first parameter:

// stores/counter.ts

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    getCount: (state) => state.count,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Using a getter

Similarly to state properties, getters need to be accessed in a way that maintains reactivity.

For instance, you could access it through the store instance:

// components/MyCounter.vue

export default defineComponent({
  setup() {
    const store = useCounterStore()
    return { store }
  },
})
// components/MyCounter.vue

<template>
  <p>Counter: {{ store.getCount }}</p>
</template>

Or, by using a computed property:

// components/MyCounter.vue

export default defineComponent({
  setup() {
    const store = useCounterStore()

    // โŒ Bad (unreactive):
    const { getCount } = store

    // โœ”๏ธ Good:
    const getCount = computed(() => store.getCount)

    return { getCount }
  },
})
// components/MyCounter.vue

<template>
  <p>Counter: {{ getCount }}</p>
</template>

Or, by using storeToRefs():

// components/MyCounter.vue
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/counter'

export default defineComponent({
  setup() {
    const store = useCounterStore()

    // โŒ Bad (unreactive):
    const { getCount } = store

    // โœ”๏ธ Good:
    const { getCount } = storeToRefs(store)

    return { getCount }
  },
})
// components/MyCounter.vue

<template>
  <p>Counter: {{ getCount }}</p>
</template>

A complete component

Since we've discussed actions and getters separately, here is a code snippet that combines both in the style that I recommend:

// components/MyCounter.vue

import { useCounterStore } from '@/stores/counter'

export default defineComponent({
  setup() {
    const store = useCounterStore()
    const getCount = computed(() => store.getCount)
    const { increment } = store
    return { getCount, increment }
  },
})
// components/MyCounter.vue

<template>
  <p>Counter: {{ getCount }}</p>
  <button type="button" @click="increment">Increment</button>
</template>

This code has been implemented at lloydtao/nuxt-3-starter/:

Demo of counter component

How do you think your developer experience will be improved? ๐Ÿ˜‰

Hey, guys! Thank you for reading. I hope that you enjoyed this.

Keep up to date with me:

...



๐Ÿ“Œ Adding Pinia to Nuxt 3 ๐Ÿ (2023)


๐Ÿ“ˆ 65.26 Punkte

๐Ÿ“Œ Vue JS Essentials: A Beginners Series on Pinia, Vitest, and Supabase #2 Pinia, Tests And Mocking


๐Ÿ“ˆ 61.47 Punkte

๐Ÿ“Œ Pinia and Nuxt 3


๐Ÿ“ˆ 50.19 Punkte

๐Ÿ“Œ Introducing @nx/nuxt: Enhanced Nuxt.js Support in Nx


๐Ÿ“ˆ 38.9 Punkte

๐Ÿ“Œ Adding Tailwind to Nuxt 3


๐Ÿ“ˆ 31.49 Punkte

๐Ÿ“Œ How to Protect State in Pinia


๐Ÿ“ˆ 30.74 Punkte

๐Ÿ“Œ How I use Appwrite Databases with Pinia to build my own habit tracker


๐Ÿ“ˆ 30.74 Punkte

๐Ÿ“Œ Learn Nuxt 3 โ€” Full course for beginners [3 hours] 2023


๐Ÿ“ˆ 22.48 Punkte

๐Ÿ“Œ CVE-2023-0878 | nuxt framework up to 3.2.0 cross site scripting


๐Ÿ“ˆ 22.48 Punkte

๐Ÿ“Œ TWC9: VS Code Updates, Nuxt, Windows 1.0 and more


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ Interaktive Websites mit Nuxt.js โ€“ fรผr Geschwindigkeit, SEO und Social Media


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ nuxt devalue up to 1.2.2 Object Key cross site scripting


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ What is Nuxt js? | One Dev Question


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ How do I create static sites with Nuxt.js? | One Dev Question


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ Can I create a Nuxt.js website for free? | One Dev Question


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ Can I deploy my Nuxt.js website on Azure static web apps? | One Dev Question


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ What are the benefits of deploying Nuxt.js and Azure Functions together? | One Dev Question


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ JavaScript: Stabile Version von Nuxt 3.0.0 ist fertig


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ Type safe APIs with Nuxt 3 and tRPC


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ CVE-2022-4414 | nuxt framework up to 3.0.0-rc.12 cross site scripting


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ TWC9: VS Code Updates, Nuxt, Windows 1.0 and more | This Week On Channel 9


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ How do I enhance the security of my Nuxt.js website? | One Dev Question


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ How to Setup and Customize Tailwind in Nuxt.js


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ Optimizing CSS Performance in Nuxt with Critters


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ CVE-2022-4413 | nuxt framework up to 3.0.0-rc.12 cross site scripting


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ Using Notion as a Headless CMS with Nuxt


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ Using FontAwesome Icons with Nuxt 3


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ Components in Nuxt 3


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ HTML Validation for Nuxt


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ How to install Tailwind CSS with Nuxt.js and Flowbite


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ Create a Recipe App with Tailwind and Nuxt.js


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ Build a serverless subscription system with Stripe and Appwrite for premium user roles in Nuxt


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ Nuxt 3, Tailwind, and Supabase Crash Course


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ Improving Performance of Nuxt with Lazy Pattern


๐Ÿ“ˆ 19.45 Punkte

๐Ÿ“Œ Building Composable Commerce with Nuxt, Shopify, and Storyblok Crash Course Part Two


๐Ÿ“ˆ 19.45 Punkte











matomo