Vue State Management: использование Pinia вместо Vuex

внешний интерфейс Vue.js
Vue State Management: использование Pinia вместо Vuex

что такое пиния

Pinia — это решение для управления состоянием для vue, разработанное членами команды vuex, и в нем реализовано множество предложений vuex5, которые являются более легкими и поддерживаются devtools.

Vuex4 подвергался критике за плохую поддержку машинописного текста, а vuex5 также опаздывает.

Так с появлением пинии

По сравнению с Vuex,

  • Pinia не нужно создавать сложные оболочки для поддержки машинописного текста, он естественным образом поддерживает оценку типа машинописного текста, пользуется автоматическим завершением, предоставляемым IDE, снижает умственную нагрузку на разработку и сокращает строко-ориентированное программирование в процессе разработки Vue.
  • Концепция мутаций вычитается, и сохраняются только три концепции состояния, геттеров и аннотаций, чтобы уменьшить избыточность кода.
  • Нет необходимости добавлять магазин вручную, созданный магазин будет добавлен автоматически при использовании
  • Нет концепции модуля модуля, вам не нужно сталкиваться со многими модулями, вложенными в хранилище, используйте однофайловое хранилище (несколько похожее на редуктор редукса/тулкита), вы можете напрямую импортировать другие хранилища для использования.

В документации Pinia есть такой абзац

image-20211103151648525

Pinia пытается максимально приблизиться к Vuex. Он направлен на тестирование следующего итерационного предложения Vuex, и достиг успеха, потому что в настоящее время у нас есть открытый RFC для Vuex 5, который очень похож на API Pinia. Обратите внимание, что I (Eduardo) автор Pania является членом основной команды Vue.js и активно участвует в конструкции API, таких как маршрутизатор и Vuex. Мое личное намерение - перепроектировать опыт использования глобального магазина при сохранении философии Vue. Я позволил API Pania api так близко, как Vuex, потому что он продолжает развиваться вперед, чтобы люди могли легко мигрировать в Vuex или даже два проекта в будущем (под Vuex).

Итак, сейчас я изучаю Pinia, что эквивалентно предварительному изучению Vuex5.

Pinia легко начать

Сначала мы инициализируем проект vite+vue+ts

pnpm create vite pinia-demo -- --template vue-ts

установить пинию

pnpm i pinia

Откройте проект, отредактируйте файл mian.ts в каталоге src и импортируйте Pinia.

// main.ts
​
import { createApp } from 'vue'
import App from './App.vue'
​
import { createPinia } from 'pinia'
​
createApp(App).use(createPinia()).mount('#app')

Создайте папку store в каталоге src для хранения управления состоянием, а затем создайте новый counter.ts, давайте создадим простое приложение состояния счетчика.

import { defineStore } from 'pinia'
​
export const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Pinia создает магазин с помощью функции defineStore, которая получает идентификатор для идентификации магазина и параметры магазина.

image-20211103172246184

Мы также можем использовать функцию обратного вызова для возврата параметров. Метод записи тела функции обратного вызова аналогичен методу записи Vue setup(). Например, приведенное выше определение можно записать как

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

Затем мы используем хранилище в App.vue

<script setup lang="ts">
import { useCounterStore } from './store/counter'
const useCounter = useCounterStore()
</script>
​
<template>
  <h2>{{ useCounter }}</h2>
  <h2>{{ useCounter.count }}</h2>
  <h2>{{ useCounter.doubleCount() }}</h2>
  <button @click="useCounter.increment">increment</button>
</template>
​
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

В процессе использования Pinia вы можете обнаружить, что автодополнение работает достаточно хорошо.

image-20211103173529625

Браузер работает следующим образом

image-20211103173626396

Откройте инструменты разработчика, чтобы просмотреть vue devtool.

image-20211103173826083

Vue devtool поддерживает добавление, удаление, изменение и проверку статуса Pinia!

Pinia имеет множество способов изменить состояние

  • Используйте действия, как показано выше

  • Изменить непосредственно в состоянии

    const countPlus_1 = useCounter.count++

  • Используйте функцию store $patch, которая поддерживает параметры и функции обратного вызова.Функция обратного вызова подходит для состояния массива или другого, и ее необходимо изменить, вызвав метод состояния.

    const countPlus_2 = useCounter.$patch({ count: useCounter.count + 1 })

    const countPlus_3 = useCounter.$patch((state) => state.count++)

Структура состояния должна использовать функцию StoreToRefs.

const { count } = storeToRefs(useCounter)

Используйте опыт

Изучение и использование Pinia довольно удобно.Вы можете начать работу, прочитав официальную документацию.В процессе начала работы вы, очевидно, почувствуете, что она быстрее, чем vuex, и имеет отличный опыт кодирования.

Для небольших проектов управление состоянием больше ориентировано на удобство и скорость (даже если вам это не нужно), поэтому такие вещи, как vuex, немного сложнее.Когда vue3 вышла из бета-версии, некоторые говорили, что можно использовать комбинированный Вместо этого API предоставляют и внедряют vuex, поэтому появление Pinia, легковесного решения для управления состоянием, весьма своевременно.

Категории