Qu'est-ce que le pinia ? Comment l'utiliser dans Vue ?

Qu'est-ce que le pinia ? Pourquoi utiliser Pinia ? Cet article vous présentera le pinia et vous présentera l'utilisation de base du pinia à travers des exemples. J'espère qu'il vous sera utile !

Qu'est-ce que Pinia ?

Pinia était à l'origine une expérience vers novembre 2019 visant à repenser l'apparence du Vue Store à l'aide de l' API de composition. Dès lors, les principes d'origine sont toujours les mêmes, mais Pinia fonctionne sur Vue 2 et Vue 3 et ne nécessite pas d'utiliser l'API de composition . Hormis installation et SSR, l'API pour les deux est la même, et la documentation est spécifique à Vue 3, avec des commentaires sur Vue 2 si nécessaire afin que les utilisateurs de Vue 2 et Vue 3 puissent la lire ! 【Recommandation associée : Tutoriel vidéo vue.js】

Pourquoi utiliser Pinia ?

Pinia est un référentiel pour Vue qui vous permet de partager l'état entre les composants/pages. ç Cela est vrai pour une application d'une seule page, mais si elle est rendue côté serveur, cela exposera votre application à des vulnérabilités de sécurité. Mais même dans les petites applications d'une seule page, vous pouvez tirer de nombreux avantages de l'utilisation de Pinia :

• Prise en charge des outils de développement

  • Suivi des délais pour les actions et les mutations
  • Les magasins apparaissent dans les composants qui les utilisent
  • Temps Voyage et plus facile Débogage

• hot Module Remplacement

  • Modifiez votre magasin sans recharger la page
  • ket tout état existant tout en développant

• Plugins: Utilisez les plugins étend la fonctionnalité PINIA

• Provide JS Utilisateurs avec prise en charge appropriée de TypeScript ou complétion automatique

• Prise en charge du rendu côté serveur

Exemple de base

Voici à quoi ressemble l'utilisation de pinia au niveau de l'API (assurez-vous de le consulter Commencer pour des instructions complètes). Vous créez d'abord une boutique :

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  // could also be defined as
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.count++
    },
  },
})

puis dans un composant l'utilisez :

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

export default {
  setup() {
    const counter = useCounterStore()

    counter.count++
    // with autocompletion ✨
    counter.$patch({ count: counter.count + 1 })
    // or using an action instead
    counter.increment()
  },
}

Vous pouvez même utiliser une fonction (similaire à un composant setup()) à définir pour une utilisation plus avancée cases A Store : setup()）来为更高级的用例定义一个 Store：

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})

如果您仍然不熟悉setup()Composition API，请不要担心，Pinia 还支持一组类似的地图助手，例如 Vuex。您以相同的方式定义存储，但随后使用mapStores()、mapState()或mapActions()：

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

const useUserStore = defineStore('user', {
  // ...
})

export default {
  computed: {
    // other computed properties
    // ...
    // gives access to this.counterStore and this.userStore
    ...mapStores(useCounterStore, useUserStore)
    // gives read access to this.count and this.double
    ...mapState(useCounterStore, ['count', 'double']),
  },
  methods: {
    // gives access to this.increment()
    ...mapActions(useCounterStore, ['increment']),
  },
}

您将在核心概念中找到有关每个地图助手的更多信息。

为什么选择Pinia

Pinia（发音为/piːnjʌ/

import { defineStore } from 'pinia'

export const todos = defineStore('todos', {
  state: () => ({
    /** @type {{ text: string, id: number, isFinished: boolean }[]} */
    todos: [],
    /** @type {'all' | 'finished' | 'unfinished'} */
    filter: 'all',
    // type will be automatically inferred to number
    nextId: 0,
  }),
  getters: {
    finishedTodos(state) {
      // autocompletion! ✨
      return state.todos.filter((todo) => todo.isFinished)
    },
    unfinishedTodos(state) {
      return state.todos.filter((todo) => !todo.isFinished)
    },
    /**
     * @returns {{ text: string, id: number, isFinished: boolean }[]}
     */
    filteredTodos(state) {
      if (this.filter === 'finished') {
        // call other getters with autocompletion ✨
        return this.finishedTodos
      } else if (this.filter === 'unfinished') {
        return this.unfinishedTodos
      }
      return this.todos
    },
  },
  actions: {
    // any amount of arguments, return a promise or not
    addTodo(text) {
      // you can directly mutate the state
      this.todos.push({ text, id: this.nextId++, isFinished: false })
    },
  },
})

Si vous n'êtes toujours pas familier avec l'API setup()Composition, ne vous inquiétez pas, Pinia prend également en charge un ensemble similaire de Map helper, tel que Vuex. Vous définissez le stockage de la même manière, mais utilisez ensuite mapStores(), mapState() ou mapActions() :

rrreee

Vous en trouverez plus des informations sur chaque

Map Assistant dans les concepts de base.

Pourquoi choisir

Pinia

Pinia (prononcé /piːnjʌ/, comme "peenya" en anglais) est la plus proche de

piña

(

ananas en espagnol), qui est un nom de package valide. Un ananas est en fait un groupe de fleurs individuelles qui se réunissent pour former plusieurs fruits. Semblables aux magasins, chacun naît indépendamment, mais finalement tous sont connectés. C'est aussi un délicieux fruit tropical originaire d'Amérique du Sud.

Un exemple plus réaliste🎜🎜Il s'agit d'un exemple plus complet de l'API dont vous utiliserez les types en Pinia🎜même en JavaScript🎜. Pour certains, cela peut suffire pour commencer sans lire davantage, mais nous vous recommandons tout de même de consulter le reste de la documentation ou même de sauter cet exemple et de revenir après avoir lu tous les 🎜Concepts de base🎜. 🎜rrreee🎜Comparaison avec Vuex🎜🎜Pinia essaie d'être aussi proche que possible de la philosophie Vuex. Il a été conçu pour tester les propositions pour la prochaine itération de Vuex, et cela a été un succès car nous avons actuellement une RFC ouverte pour Vuex 5 avec une API très similaire à celle utilisée par Pinia 🎜. Veuillez noter que moi (Eduardo), l'auteur de Pinia, fais partie de l'équipe principale de Vue.js et participe activement à la conception d'API telles que Router et Vuex. Mon intention personnelle avec ce projet était de repenser l'expérience d'utilisation d'un magasin mondial tout en conservant la philosophie accessible de Vue. Je garde l'API de Pinia aussi proche de Vuex car elle continue d'avancer pour faciliter la migration des utilisateurs vers Vuex et même fusionner les deux projets (sous Vuex) à l'avenir. 🎜

RFC

Alors que Vuex collecte autant de commentaires que possible de la communauté via les RFC, Pinia ne le fait pas. Je teste des idées en fonction de mon expérience en matière de développement d'applications, de lecture du code d'autres personnes, de travail pour des clients utilisant Pinia et de réponse à des questions sur Discord. Cela me permet de fournir une solution efficace qui fonctionne dans une variété de situations et de tailles d'applications. Je publie fréquemment et je fais évoluer la bibliothèque tout en gardant son API principale inchangée.

Comparaison avec Vuex 3.x/4.x

Vuex 3.x est Vuex pour Vue 2 et Vuex 4.x est Vue 3

L'API Pinia est très différente de Vuex ≤4, c'est-à-dire :

• Mutation n'existe plus. Ils sont souvent considérés comme très verbeux. Ils ont initialement apporté l'intégration des outils de développement, mais ce n'est plus un problème.
• Pas besoin de créer des wrappers complexes personnalisés pour prendre en charge TypeScript, tout est tapé et l'API est conçue de manière à exploiter l'inférence de type TS autant que possible.
• Plus besoin d'injecter des chaînes magiques, d'importer des fonctions, de les appeler, profitez de la saisie semi-automatique !
• Pas besoin d'ajouter des magasins de manière dynamique, ils sont tous dynamiques par défaut et vous ne le remarquerez même pas. Notez que vous pouvez toujours vous inscrire manuellement en utilisant la boutique à tout moment, mais comme c'est automatique, vous n'avez pas à vous inquiéter.
• Fini les structures imbriquées de modules. Vous pouvez toujours imbriquer implicitement des magasins en important et en utilisant un magasin dans un autre magasin, mais Pinia fournit une structure plate par conception tout en prenant en charge la combinaison croisée entre les magasins. Vous pouvez même avoir des dépendances circulaires sur le magasin.
• Modules sans espace de noms. Compte tenu de l'architecture plate des magasins, les magasins « à espace de noms » sont inhérents à la façon dont ils sont définis, et on pourrait dire que tous les magasins sont à espace de noms.

Pour des instructions plus détaillées sur la façon de convertir un projet Vuex ≤4 existant pour utiliser Pinia, consultez le Migration depuis Vuex Guide.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!