Apprenez à connaître la bibliothèque de gestion d'état nouvelle génération de Vue - Pinia

Qu'est-ce que le pinia ? Comment utiliser ? Cet article vous fera découvrir Vue une nouvelle génération de bibliothèque de gestion d'état - Pinia. J'espère qu'il vous sera utile !

Qu'est-ce que Pinia

Pinia (Ananas en espagnol) est essentiellement toujours une bibliothèque de gestion d'état, utilisée pour le partage d'état entre les composants et les pages. [Recommandations associées : Tutoriel vidéo vue.js]

La différence entre pinia et vuex :

• Support TypeScript plus convivial, le support précédent de Vuex pour TS était très hostile

• Par rapport à Vuex, Pinia fournit un API plus simple avec moins de rituels, fournissant une API de style Composition-API

• Plus de structures imbriquées de modules

• Il n'y a plus de concept d'espaces de noms, pas besoin de se souvenir de leur relation complexe

Comment utilisez Pinia

1. Installez pinia

yarn add pinia

2. Créez un pinia

// src/stores/index.js
import { createPinia } from "pinia";

const pinia = createPinia()

export default pinia

//main.js
import pinia from './stores'

app.use(pinia)

Apprenez à connaître Store

Un magasin (comme Pinia) est une entité, il contient la état et la logique commerciale qui sont liés à votre arborescence de composants, ce qui signifie sauvegarder l'état global

De cette façon, vous pouvez définir n'importe quel nombre de magasins pour gérer votre état, y compris state、getters、actions

1 Définition Un magasin

• Le magasin est. défini à l'aide de definitionStore(),

• et nécessite un nom unique, passé comme premier paramètre

2. Utilisation de store

Operation State

état est la partie centrale du magasin, et le magasin est utilisé pour mettre en œuvre notre gestion de l'État. 1ère méthode : modifier directement l'état un par un

• Getters
• 1. Reconnaître et définir les Getters

GettersÉquivalent aux propriétés calculées du Store :

Vous pouvez utiliser l'attribut getters dans DéfinirStore() Définition ;

getters peuvent définir une fonction qui accepte un état comme paramètre

2 Accéder aux getters

Méthode 1 : accéder aux getters du magasin actuel

. Méthode 2 : Accéder aux Getters possédant d'autres Getters

• Méthode 3 : Accéder aux Getters d'autres magasins

getters: {
    // 1. 基本使用
    debouleCount(state) {
      return state.count * 2
    },
    // 2. 一个 getters 引入另外一个 getters
    useDebouleCount() {
      return this.debouleCount + 2
    },
    // 3. getter也支持返回一个函数
    getFriendById(state) {
      return function (id) {
        for (let i = 0; i 

• Comprendre et définir l'action

• L'action peut être comprise comme des méthodes en composants , tout comme les getters, toutes les opérations de l'ensemble de l'instance de magasin sont accessibles via cela dans l'action.

• Action prend en charge les opérations asynchrones, vous pouvez donc utiliser wait.

Pour plus de connaissances liées à 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!