Начало работы с Пиней

Vue.js

Что такое Пиния?

Pinia — это библиотека управления состоянием для Vue, похожая на Vuex, которая является еще одним решением для управления состоянием для Vue.
Pinia поддерживает Vue2 и Vue3

В этой статье говорится только об использовании Pinia в Vue3, использование в Vue2 немного отличается, см.официальная документация

Преимущество пинии

Интуитивно понятный и простой в освоении
Чрезвычайно легкий, всего 1 КБ
Модульная конструкция, легко разделяемое состояние

Установить Пинию

Для установки требуется @next, потому что Pinia 2 находится в стадии бета-тестирования, а Pinia 2 — это версия, соответствующая Vue3.

# 使用 npm
npm install pinia@next
# 使用 yarn
yarn add pinia@next

Создайте pinia (корневое хранилище) и передайте его приложению:

import { createPinia } from 'pinia';

app.use(createPinia());

Основные понятия и основное использование

Store

Store — это объект, который сохраняет состояние и бизнес-логику, может свободно читаться и записываться и использоваться в настройке после импорта.
создать магазин

// store.js
import { defineStore } from "pinia";

// defineStore 调用后返回一个函数，调用该函数获得 Store 实体
export const useStore = defineStore({
  // id: 必须的，在所有 Store 中唯一
  id: "myGlobalState",
  // state: 返回对象的函数
  state: ()=> ({
    count: 1
  }),
});

Использовать магазин

// xxx.vue
<template>
  <div>
    {{store.count}}
  </div>
</template>
<script>
  // 导入 Store， 使用自己的路径
  import { useStore } from "@/store/store.js";
  export default {
    setup() {
      // 调用函数 获得Store
      const store = useStore();
      return {
        store
      }
    }
  }
</script>

Getters

Геттеры в Pinia работают так же, как геттеры в Vuex, но используют немного разные
Геттеры в Pinia напрямую читаются в Store, аналогично Store.xx, точно так же, как обычное чтение свойств.

Основное использование Getter

Первым параметром Getter является состояние, которое является текущим состоянием.Вы также можете использовать this.xx для получения состояния
Getter также может получить доступ к другим Getters или другим магазинам.

пример:

// 修改 store.js
import { defineStore } from "pinia";

import { otherState } from "@/store/otherState.js";

export const useStore = defineStore({
  id: "myGlobalState",
  state: ()=> ({
    count: 2
  }),
  getters: {
    // 一个基本的 Getter： 计算 count 的平方
    // 使用参数
    countPow2(state) {
      return state.count ** 2;
    },
    // 使用 this
    /* 
    countPow2() {
      return this.count ** 2;
    }, 
    */
    // 简单的 Getter 直接使用箭头函数
    // countPow2: state=> state.count ** 2

    // 获取其它 Getter， 直接通过 this
    countPow2Getter() {
      return this.countPow2;
    }

    // 使用其它 Store
    otherStoreCount(state) {
      // 这里是其他的 Store，调用获取 Store，就和在 setup 中一样
      const otherStore = useOtherStore();
      return otherStore.count;
    },
  }
});

// otherState.js
import { defineStore } from "pinia";

export const useStore = defineStore({
  id: "otherState",
  state: ()=> ({
    count: 5
  }),
});

actions

У Pinia нет мутаций, она единообразно управляет состоянием в действиях и получает доступ к соответствующему состоянию через this.xx
Хотя можно управлять Магазином напрямую, рекомендуется управлять им в действиях, чтобы гарантировать, что состояние не будет случайно изменено.
действие похоже на обычную функцию
Action также может получить доступ к другим магазинам, таким как Getter, и использовать другие магазины так же, как описано выше. Я не буду здесь вдаваться в подробности. Подробности см.Действия с официальной документацией

основное использование действия

// store.js
export const useStore({
  state: ()=> ({
    count: 2,
    // ...
  })
  // ...
  actinos: {
    countPlusOne() {
      this.count++;
    },
    countPlus(num) {
      this.count += num;
    }
  }
})

Суммировать

Pinia проще, чем Vuex, и Pinia можно свободно расширять.Плагины официальной документации
Pinia — это интуитивно понятный метод управления состоянием, который позволяет пользователям вернуться к исходному состоянию импорта и экспорта модуля, делая источник состояния более четким.
Опыт использования Pinia аналогиченRecoil, но концепций и API не так много, основная часть очень оптимизирована и проста в использовании (Recoil — это официальная библиотека управления состоянием React, созданная Facebook, использующая React Hooks для управления состоянием)
Pinia 2 все еще находится в стадии бета-тестирования и не рекомендуется для использования в производственных средах, но я считаю, что после того, как она станет стабильной, она станет еще одним важным решением для управления состоянием в экосистеме Vue.

Категории