Vue 3 Глава 31: Управление состоянием (Основы Pinia)

1. Введение в Пинию

Управление состоянием — важная концепция в разработке современных веб-приложений. Библиотека управления состоянием в Vue 3 Pinia— это Vue 3 Composition APIбиблиотека управления состоянием, основанная на Vue, которая обеспечивает простой и гибкий способ управления состоянием приложения, а также производительность и масштабируемость . PiniaВ некотором смысле его также можно назвать Vuex5, потому что он объединяет Vuex 5множество идей в обсуждении основной группы, поэтому он заменен Piniaновой схемой рекомендацийVuex .

2. Преимущества Пинии

• Поддержка инструментов разработчика
  • трек actions, mutationsтаймлайн
  • Отобразите их в компонентах, используяStore
  • упростить отладкуTime travel
• горячее обновление
  • Можно изменить без перезагрузки страницыStore
  • При разработке вы можете сохранить текущуюState
• напрямую через данные в actionsмодификацииstate . Устаревший mutation.
• Именованных модулей больше нет . Отменено , каждый модуль vuexнезависимmodulePinia
• плагин . PiniaФункциональность может быть расширена плагинами
• лучшая TypeScriptподдержка . Предусмотрена функция завершения кода, чтобы избежать внедрения слишком большого количества магических строк.
• Поддержка рендеринга на стороне сервера .
• Меньший размер . Только 2,1 КБ после сжатия

3. Установка и использование Pinia

3.1. Установка

Установить Pinia очень просто, просто используйте npm или yarn для установки:

npm install pinia

# 或

yarn add pinia

3.2 Использование

3.1.1. Создайте магазин Pinia

Создать магазин Pinia очень просто, вот простой пример:
TipsЧто касается именования магазина Pinia, официально рекомендуемым методом является use+name+Store .

import {
    
     defineStore } from 'pinia'
// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useCounterStore = defineStore({
    
    
  id: "counter",
  state: () => ({
    
    
    count: 0,
  }),
  actions: {
    
    
    increment() {
    
    
      this.count++;
    },
    decrement() {
    
    
      this.count--;
    },
  },
  getters: {
    
    
    doubleCount: ({
     
      count }) => count * 2,
  },
});

В приведенном выше коде мы сначала используем defineStoreфункцию для создания useCounterStoreмагазина Pinia с именем , stateзатем определяем countсвойство в функции и, actionsнаконец определяем дваincrement метода в объекте для изменения свойства.decrementcount

Конечно, мы также можем определить Store с помощью функции:

import {
    
     ref, computed } from "vue";
// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useCounterStore = defineStore('counter', () => {
    
    
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2);
  function increment() {
    
    
    count.value++
  }
  function decrement() {
    
    
    count.value--
  }

  return {
    
     count, doubleCount, increment, decrement }
})

3.2.2 Использование Pinia Store в компонентах

Чтобы использовать Pinia Store в компоненте, нам нужно импортировать Store.

<script setup lang="ts">
import {
    
     useCounterStore } from "@/stores/counter";

const counterStore = useCounterStore()
// 注意此处不能直接采用结构赋值的方法：如 const { count, doubleCount } = useCounterStore()
// 这样会让数据失去响应性
</script>

Если вы хотите назначить структуру, вам нужно импортировать функцию storeToRefs, чтобы превратить деструктурированные параметры в адаптивные:

<script setup lang="ts">
import {
    
     storeToRefs } from 'pinia'
import {
    
     useCounterStore } from "@/stores/counter";

const counterStore = useCounterStore()
// 将解构出来的参数变成响应式
const {
    
     count, doubleCount } = storeToRefs(counterStore)
// 作为 action 的 increment 和 decrement 可以直接解构
const {
    
     increment, decrement } = counterStore 
</script>

3.2.3 Использование Pinia Store в шаблонах

Чтобы использовать Pinia Store в шаблоне, мы просто используем его непосредственно в шаблоне.

<template>
  <div>
    <p>Count: {
   
   { counterStore.count }}</p>
    <p>doubleCount: {
   
   { counterStore.doubleCount }}</p>
    <button @click="counterStore.increment()">Increment</button>
    <button @click="counterStore.decrement()">Decrement</button>
  </div>
</template>

4. Управление состоянием и потоком данных Pinia

• В России Piniaконцепции управления состоянием и потока данных очень важны. Управление состоянием относится к сохранению состояния приложения в централизованном месте, а также к изменению и запросу состояния с помощью некоторых методов . Поток данных относится к тому, как данные передаются в приложении , включая источник , передачу , обработку и хранение данных .

• В Pinia, мы можем использовать Storeдля управления состоянием приложения, а также использовать Actionsи Gettersдля изменения и запроса состояния. Store это объект, содержащий состояние, действия и геттеры, которые могут совместно использоваться несколькими компонентами . Когда компоненту необходимо изменить или запросить состояние, он может Storeполучить доступ к состоянию, вызвав соответствующий Actionsили Gettersдля изменения или запроса состояния.

• В Pinia, способ передачи данных очень прост и интуитивно понятен. Когда компонент вызывается Storeдля Actionsизменения состояния, данные передаются от компонента к другим компонентам Storeи обратно . StoreКогда компонент вызывает Storeсостояние Gettersзапроса, данные Storeпередаются от компонента к компоненту. Такой способ передачи данных очень прост и управляем , что позволяет нам лучше управлять и поддерживать состояние приложения .

5. Модульность и пространства имен Pinia

В Pinia мы можем использовать модуляризацию и пространства имен для организации хранилищ, чтобы лучше управлять и поддерживать состояние приложения. Модульность и пространства имен могут помочь нам разделить состояние приложения на логические модули и объединить их в полное состояние приложения. Этот модульный подход и подход к пространству имен очень понятный и управляемый, что позволяет нам лучше управлять и поддерживать состояние приложения.

5.1 Модульность

В Pinia мы можем использовать defineStoreэту функцию для определения Store. defineStoreФункция может принимать объект параметра, который содержит такую ​​информацию, как состояние Store, Actions и Getters. Мы можем объединить несколько defineStoreфункций в полное хранилище, чтобы лучше управлять и поддерживать состояние приложения.

import {
    
     defineStore } from 'pinia'

const counterStore = defineStore({
    
    
  id: 'counter',
  state: () => ({
    
    
    count: 0
  }),
  actions: {
    
    
    increment() {
    
    
      this.count++
    },
    decrement() {
    
    
      this.count--
    }
  },
  getters: {
    
    
    doubleCount: (state) => state.count * 2,
  },
})

const userStore = defineStore({
    
    
  id: 'user',
  state: () => ({
    
    
    name: '',
    email: ''
  }),
  actions: {
    
    
    setName(name) {
    
    
      this.name = name
    },
    setEmail(email) {
    
    
      this.email = email
    }
  }
})

export default {
    
    
  counterStore,
  userStore
}

В приведенном выше коде мы сначала используем defineStoreфункцию для определения counterStoreхранилища с именем , которое содержит состояние счетчика и действия для увеличения и уменьшения значения счетчика. Затем мы используем defineStoreэту функцию для определения userStoreхранилища с именем , которое содержит статус информации о пользователе и действия для изменения имени пользователя и электронной почты. Наконец, counterStoreмы userStoreэкспортируем и как объект для использования в других компонентах.

5.2 Пространства имен

В Pinia мы можем использовать пространства имен для организации магазинов. Пространства имен могут группировать несколько Store и объединять их в полное состояние приложения. Пространства имен могут помочь нам лучше управлять и поддерживать состояние приложения, избегая конфликтов состояний и повторяющихся определений.

import {
    
     createPinia } from 'pinia'
import {
    
     counterStore } from './counter'
import {
    
     userStore } from './user'

const pinia = createPinia()

pinia.useStore('counter', counterStore)
pinia.useStore('user', userStore)

export default pinia

В приведенном выше коде мы сначала используем createPiniaфункцию для создания экземпляра Pinia, затем используем useStoreфункцию для добавления counterStoreи userStoreк экземпляру Pinia и counterиспользуем userпространства имен и соответственно. Это означает, что в других компонентах мы this.$pinia.store.counterможем this.$pinia.store.userполучить доступ к хранилищу счетчиков и хранилищу пользовательской информации через и .

6. Механизм подключаемых модулей Pinia и асинхронная работа

6.1. Вставной механизм

В Pinia мы можем использовать плагины для расширения его функциональности. Плагин может быть простым объектом или объектом, содержащим несколько функций. Мы можем использовать useфункцию для добавления плагинов.

import {
    
     createPinia } from 'pinia'

const pinia = createPinia()
const myPlugin = {
    
    
	// ...
}
pinia.use(myPlugin)

В приведенном выше коде мы сначала используем createPiniaфункцию для создания экземпляра Pinia, а затем используем useфункцию для myPluginдобавления к экземпляру Pinia.

6.2 Асинхронные операции

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

import {
    
     defineStore } from 'pinia'

export const useUserStore = defineStore({
    
    
  id: 'user',
  state: () => ({
    
    
    name: '',
    email: ''
  }),
  actions: {
    
    
    async fetchUser() {
    
    
      const response = await fetch('/api/user')
      const data = await response.json()
      this.name = data.name
      this.email = data.email
    }
  }
})

В приведенном выше коде мы сначала используем defineStoreфункцию для определения useUserStoreхранилища с именем, которое содержит статус информации о пользователе и fetchUserметод . В fetchUserметоде мы сначала используем fetchфункцию для получения данных информации о пользователе, а затем используем awaitключевое слово для ожидания fetchрезультата функции и анализируем его в формате JSON. Наконец, мы присваиваем полученные данные состоянию хранилища.