Pinia — это библиотека управления состоянием, пришедшая на смену VueX в проектах на Vue. Там, где раньше вы использовали VueX, теперь вы будете использовать Pinia. С нашим плагином Pinia вы можете отслеживать изменения состояния на протяжении всего жизненного цикла вашего приложения.

Плагин можно легко установить с помощью следующей команды:

npm i @openreplay/tracker-vuex

Для этого примера мы будем использовать демонстрационное Vue-приложение, чтобы показать, как можно добавить этот плагин и работать с ним внутри реального приложения.

Примечание: полный исходный код этого примера находится в этом репозитории GitHub; загляните туда, если вам нужны дополнительные подробности.

После установки плагина мы изменим файл main.js, добавив приведённую ниже инструкцию импорта:

import trackerVuex from '@openreplay/tracker-vuex/cjs';

А затем мы используем функцию startTracker, чтобы создать экземпляр трекера и сразу же подключить плагин.

Результатом вызова этой функции будет объект, содержащий результаты использования метода use с плагином.

Обратите внимание, что имя деструктурированного свойства совпадает со значением свойства name. Пока вы сохраняете эти два значения одинаковыми, всё в порядке.

const {piniaPlugin} = startTracker({
    projectKey: "<your project key>",
    plugins: [{
        name: 'piniaPlugin',
        fn: trackerVuex
    }]
})

Следующий шаг — создать именованную обёртку для хранилища, которую мы позже используем для настройки плагина на нужном хранилище.

const piniaStoreWrapper = piniaPlugin("products")
saveStore(piniaStoreWrapper)

piniaStoreWrapper позже нужно будет использовать с тем хранилищем, которое мы решим отслеживать. Однако на данный момент хранилище ещё не создано, поэтому мы сохраним обёртку с помощью функции saveStore.

Прежде чем двигаться дальше, давайте рассмотрим функции saveStore и startTracker.

Первая является частью модуля storesManager, который выглядит следующим образом:

let storeWrapper = null;

export function saveStore(s) {
    storeWrapper = s;
}

export function getStore(store) {
    return storeWrapper;
}

Этот модуль позволит нам использовать piniaStoreWrapper, который мы создали ранее, в другом месте.

Что касается функции startTracker, её код выглядит так:

export function startTracker(config) {
    console.log("Starting tracker...")

    console.log("Project key used: ", config.projectKey)
    const trackerConfig = {
        projectKey: config.projectKey,
         //ingestPoint: config.ingestPoint,
        __DISABLE_SECURE_MODE: true
    }

    const tracker = new Tracker(trackerConfig);

    const pluginReturns = {}
    config?.plugins.forEach( p => {
        console.log("Using plugin...", p.name)
        pluginReturns[p.name] = tracker.use(p.fn())
    })
 
    tracker.start();
    return {
        tracker,
        ...pluginReturns
    }
}

Эта функция создаёт экземпляр трекера с конфигурацией, которую мы ей передаём. Обратите внимание, что я оставил параметр ingestPoint закомментированным; это потому, что мы работаем напрямую с SaaS-версией, но если вы хотите использовать этот код с self-hosted версией, вам придётся указать его, и он должен выглядеть примерно так: <your-instance>.yourhost/ingest

Когда весь код настройки готов, перейдите туда, где вы используете хранилище; в нашем примере давайте отредактируем файл App.vue, чтобы вызвать функцию getStore, которая вернёт обёртку хранилища, сохранённую нами ранее.

И мы используем её, чтобы обернуть хранилище, которое хотим отслеживать:

<template>
  <!-- template code -->
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue'
import { Product, useProductStore } from './store/products'
import { useCartStore } from './store/cart'
import {getStore} from './store/storesManager.js'

export default defineComponent({
  setup() {
   
    const productStore = useProductStore()
    const loading = ref(true)
    //we get the wrapper here
	  const storeWrapper = getStore()

    onMounted(async () => {
      await productStore.fetchAll()
      loading.value = false
    })

    const cartStore = useCartStore()

		//we wrap the cart store here
    storeWrapper(cartStore)
    return {
      products: computed(() => productStore.list),
      cart: computed(() => cartStore.formattedCart),
      total: computed(() => cartStore.total),
      loading,
      add: (product: Product) => cartStore.add(product),
      remove: (product: Product) => cartStore.remove(product),
    }
  }
})

</script>

Чтобы просмотреть изменения состояния во время воспроизведения, нажмите на новую вкладку VueX в правом нижнем углу:

При нажатии на неё вы увидите содержимое хранилища и сможете понять, как оно меняется, а также какие данные в нём сохранены:

Обратите внимание на имя хранилища — это имя, которое мы использовали при первом вызове плагина Pinia.

Вы можете ознакомиться с этим репозиторием, чтобы увидеть полный исходный код работающего приложения Pinia/Vue с плагином Pinia. Если у вас возникнут какие-либо проблемы при настройке плагина Pinia в вашем проекте, свяжитесь с нами в нашем сообществе Slack и задайте вопросы напрямую нашим разработчикам!