Maison  >  Article  >  interface Web  >  Partagez le nouvel outil de gestion d'état de Vue3 : Pinia

Partagez le nouvel outil de gestion d'état de Vue3 : Pinia

青灯夜游
青灯夜游avant
2021-12-16 10:42:043702parcourir

Cet article partagera avec vous le nouvel outil de gestion d'état Vue3 : Pinia Parlons de l'installation et de l'utilisation de l'outil Pinia. J'espère qu'il sera utile à tout le monde.

Partagez le nouvel outil de gestion d'état de Vue3 : Pinia

Nouvel outil de gestion d'état Vue3 : Pinia

Vue3 est sorti depuis un certain temps. Il adopte un nouveau système réactif et construit un nouvel ensemble d'API de composition. L'écosystème environnant de Vue intensifie ses efforts pour s'adapter à ce nouveau système, et la bibliothèque officielle de gestion de l'État Vuex s'adapte également. Pour cette raison, le responsable a présenté une nouvelle proposition pour Vuex 5. [Recommandations associées : "tutoriel vue.js"]Composition API。Vue 的周边生态都在加紧适配这套新的系统,官方的状态管理库 Vuex 也在适配中,为此官方提出了一个 Vuex 5 的全新提案。【相关推荐:《vue.js教程》】

Partagez le nouvel outil de gestion détat de Vue3 : Pinia

  • 支持两种语法创建 Store:Options ApiComposition Api
  • 删除 mutations,只支持 stategettersactions
  • 模块化的设计,能很好支持代码分割;
  • 没有嵌套的模块,只有 Store 的概念;
  • 完整的 TypeScript 支持;

在这个提案下方,有个评论很有意思。简单翻译一下:

Partagez le nouvel outil de gestion détat de Vue3 : Pinia

好巧不巧,Vuex5 的提案,与 Pinia 实现的功能不能说毫无关系,只能说一模一样,今天的文章就来给大家介绍一下这个菠萝。

安装

在现有项目中,用过如下命令进行 Pinia 模块的安装。

# yarn
yarn add pinia@next
# npm
npm i pinia@next

安装完成后,需要在 Vue3 项目的入口文件中,进行导入安装。

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

// 实例化 Vue
const app = createApp(App)
// 安装 Pinia
app.use(createPinia())
// 挂载在真实 DOM
app.mount('#app')

上手

要使用 Pinia 的话,只需要定义一个 store,然后在用到该数据的地方进行导入。

定义 Store

import { defineStore } from "pinia"

// 对外部暴露一个 use 方法,该方法会导出我们定义的 state
const useCounterStore = defineStore({
  // 每个 store 的 id 必须唯一
  id: 'counter',
  // state 表示数据源
  state: () => ({
    count: 0
  }),
  // getters 类似于 computed,可对 state 的值进行二次计算
  getters: {
    double () {
        // getter 中的 this 指向 state
        return this.count * 2
      },
      // 如果使用箭头函数会导致 this 指向有问题
      // 可以在函数的第一个参数中拿到 state
    double: (state) => {
        return state.count * 2
      }
  },
  // actions 用来修改 state
  actions: {
    increment() {
      // action 中的 this 指向 state
      this.count++
    },
  }
})

export default useCounterStore

除了使用上述类似 vuex 的方式来构建 state,还可以使用 function 的形式来创建 store,有点类似于 Vue3 中的 setup()

import { ref, computed } from "vue"
import { defineStore } from "pinia"

// 对外部暴露一个 use 方法,该方法会导出我们定义的 state
const useCounterStore = defineStore('counter', function () {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
  return {
      count, double, increment
  }
})

export default useCounterStore

使用 Store

前面也介绍过,Pinia 提供了两种方式来使用 store,Options ApiComposition Api 中都完美支持。

Options Api

Options Api 中,可直接使用官方提供的 mapActionsmapState 方法,导出 store 中的 state、getter、action,其用法与 Vuex 基本一致,很容易上手。

import { mapActions, mapState } from 'pinia'
import { useCounterStore } from '../model/counter'

export default {
  name: 'HelloWorld',
  computed: {
    ...mapState(useCounterStore, ['count', 'double'])
  },
  methods: {
    ...mapActions(useCounterStore, ['increment'])
  }
}

Composition Api

Composition Api 中,不管是 state 还是 getter 都需要通过 computed 方法来监听变化,这和 Options Api 中,需要放到 computed 对象中的道理一样。另外, Options Api  中拿到的 state 值是可以直接进行修改操作的,当然还是建议写一个 action 来操作 state 值,方便后期维护。

// Composition Api
import { computed } from 'vue'
import { useCounterStore } from '../stores/counter'
export default {
  name: 'HelloWorld',
  setup() {
    const counter = useCounterStore()
    return {
      // state 和 getter 都需要在使用 computed,这和 Options Api 一样
      count: computed(() => counter.count),
      double: computed(() => counter.double),
      increment: () => { counter.count++ }, // 可以直接修改 state 的值
      increment: counter.increment, // 可以引用 store 中定义的 action
    }
  }
}

类型提示

在 Vuex 中,TypeScript 的类型提示做得不是很好,在进行类型推导时,只能找到它的 state。特别是写代码的过程中,代码提示就很不智能。

Partagez le nouvel outil de gestion détat de Vue3 : Pinia

而 pinia,就能推导出定义的所有 state、getter、action,这样在写代码的时候,就会方便很多。

Partagez le nouvel outil de gestion détat de Vue3 : Pinia

Partagez le nouvel outil de gestion détat de Vue3 : Pinia

主要是 pinia 通过 TypeScript 进行了十分友好的类型定义,感兴趣的可以看看 pinia 的类型定义文件(pinia.d.ts

Partagez le nouvel outil de gestion détat de Vue3 : Pinia

  • Prend en charge deux syntaxes pour la création de Store : Options Api et Composition Api ;
  • Supprimer les mutations, ne prend en charge que state, getters, actions ;
  • La conception modulaire peut bien prendre en charge le fractionnement du code
  • Il n'y a pas de modules imbriqués, seulement le concept Store ; li>
  • Prise en charge complète de TypeScript ;
Partagez le nouvel outil de gestion détat de Vue3 : PiniaSous cette proposition, il y a un commentaire intéressant. Une traduction simple :

Partagez le nouvel outil de gestion détat de Vue3 : PiniaQuelle coïncidence, on ne peut pas dire que la proposition Vuex5 n'a rien à voir avec les fonctions implémentées par Pinia, on peut seulement dire qu'elle est exactement la même. L'article d'aujourd'hui vous présentera cet ananas.

Installation

Dans le projet existant, la commande suivante a été utilisée pour installer le module Pinia. Partagez le nouvel outil de gestion détat de Vue3 : Piniarrreee

Une fois l'installation terminée, vous devez l'importer et l'installer dans le fichier d'entrée du projet Vue3.

rrreeePartagez le nouvel outil de gestion détat de Vue3 : Pinia

Mise en route🎜🎜🎜Pour utiliser Pinia, il vous suffit de définir un magasin puis de l'importer là où les données sont utilisées. 🎜🎜🎜Define Store🎜🎜rrreee🎜En plus d'utiliser la méthode de type vuex ci-dessus pour créer l'état, vous pouvez également utiliser la forme de fonction pour créer un magasin, qui est quelque peu similaire à setup(). 🎜rrreee🎜🎜Utilisation de Store🎜🎜🎜Comme introduit précédemment, Pinia propose deux façons d'utiliser le magasin, <code>Options Api et Composition Api sont parfaitement prises en charge. 🎜🎜🎜Options Api🎜🎜🎜Dans Options Api, vous pouvez directement utiliser les méthodes mapActions et mapState officiellement fournies pour exporter l'état dans le store , getter et action, leur utilisation est fondamentalement la même que celle de Vuex et il est facile de démarrer. 🎜rrreee🎜🎜Composition Api🎜🎜🎜Composition Api, l'état et le getter doivent écouter les changements via la méthode calculée, qui est la même que Options Api code>, il doit être placé dans l'objet calculé pour la même raison. De plus, la valeur d'état obtenue dans Options Api peut être directement modifiée. Bien entendu, il est recommandé d'écrire une action pour faire fonctionner la valeur d'état afin de faciliter la maintenance ultérieure. 🎜rrreee🎜🎜Indices de type🎜🎜🎜Dans Vuex, les indices de type de TypeScript ne sont pas très bons Lorsque vous effectuez une dérivation de type, vous ne pouvez trouver que son état. Surtout lors du processus d'écriture de code, les invites de code sont très peu intelligentes. 🎜🎜Partagez le nouvel outil de gestion détat de Vue3 : Pinia🎜🎜Et pinia, vous pouvez déduire tous les états, getters et actions définis, ce qui sera beaucoup plus pratique lors de l'écriture de code. 🎜🎜Partagez le nouvel outil de gestion détat de Vue3 : Pinia🎜🎜🎜🎜 Principalement pinia passé TypeScript a une définition de type très conviviale Si vous êtes intéressé, vous pouvez jeter un œil au fichier de définition de type de pinia (pinia.d.ts) : 🎜🎜🎜🎜🎜🎜Découpage du code🎜🎜🎜En raison de. l'utilisation de modules En raison de la conception centralisée, tous les magasins peuvent être introduits individuellement, au lieu de monter tous les modules sur un seul magasin via des modules comme vuex. 🎜🎜Supposons que nous créions actuellement un magasin via Vuex. Il y a deux modules sous ce magasin, à savoir le module utilisateur (Utilisateur) et le module produit (Marchandises). Même si la page d'accueil actuelle n'utilise que les informations utilisateur, l'intégralité du Store sera regroupée dans le bloc js de la page d'accueil. 🎜🎜🎜🎜🎜🎜🎜

Si nous utilisons pinia, nous utiliserons defineStore pour définir deux magasins complètement distincts Lorsque les deux pages seront introduites, elles ne s'influenceront pas. Lors du packaging final, le chunk js de la page d'accueil et le chunk js de la page produit seront respectivement packagés dans les magasins correspondants.

Partagez le nouvel outil de gestion détat de Vue3 : Pinia

L'introduction de Pinia prend fin ici. S'il y a de nouveaux projets qui doivent être développés avec Vue3, il est recommandé d'utiliser Pinia sans aucun cerveau. Il est plus concis et ne fait que 1 Ko.

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer