Если вы используете VueX для управления состоянием ваших приложений на основе Vue, то интеграция плагина OpenReplay для отслеживания обновлений состояния выполняется очень просто.

Если вы хотите следовать примеру, используйте опубликованный здесь код.

Первое, о чём нам нужно позаботиться, — это интеграция трекера OpenReplay в проект. Мы имеем дело с проектом на основе Vue, а значит, нашей точкой входа будет файл main.js. Сначала установите трекер с помощью:

yarn add @openreplay/tracker

Или используйте npm, если предпочитаете:

npm install @openreplay/tracker

Покончив с этим, после того как вы настроите проект на платформе, получите KEY проекта и сохраните его в файле .env, расположенном в корне проекта.

VUE_APP_OPENREPLAY_PROJECT_KEY=<your project key here>

Обратите внимание на имя переменной окружения. Оно начинается с VUE_APP_, потому что, когда мы так делаем, WebPack заменит её значение везде, где мы используем код process.env.VUE_APP_OPENREPLAY_PROJECT_KEY, чтобы избавить нас от необходимости отправлять клиенту настоящий файл конфигурации.

Теперь внутри папки src создайте папку tracker, а в ней — файл index.js. Этот файл будет экспортировать одну-единственную функцию: startTracker, которая всё настроит и запустит трекер.

import Tracker from '@openreplay/tracker';

import {v4 as uuidV4} from 'uuid'

function defaultGetUserId() {
   return uuidV4() 
}

export function startTracker(config) {

    console.log("Starting tracker...")

    const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId
    let userId = null;

    const trackerConfig = {
        projectKey: config.projectKey
    }

    const tracker = new Tracker(trackerConfig);

    const pluginReturns = {}
    Object.keys(config?.plugins).forEach( pk => {
        pluginReturns[pk] = tracker.use(config?.plugins[pk]())
    })
 
    if(config?.userIdEnabled) {
        userId = getUserId()
        tracker.setUserID(userId)
    }
    console.log("tracker: user id: ", userId)

    tracker.start();
    return {
        tracker,
        userId,
        ...pluginReturns
    }
}

Теперь вам нужно позаботиться лишь о том, чтобы эта функция делала всё, что вам необходимо. Всё, что вам нужно, — это передать project key при её вызове. Вот так (из файла main.js):

import {startTracker} from './tracker/index'

let {vuexTracker} = startTracker({
    projectKey: process.env.VUE_APP_OPENREPLAY_PROJECT_KEY,
})

Как мы уже видели, строка process.env.VUE_APP_OPENREPLAY_PROJECT_KEY будет заменена вашим настоящим project key при рендеринге страницы.

Теперь давайте добавим плагин VueX, чтобы мы также могли начать отслеживать изменения состояния.

Плагин легко устанавливается одной строкой:

yarn add @openreplay/tracker-vuex

После этого мы можем импортировать его в наш код и передать как часть объекта конфигурации в функцию startTracker.

Вернитесь к определению этой функции и обратите внимание, что у нас уже есть код для обработки плагинов. Фактически элемент plugins конфигурации — это карта (map), которая принимает плагины (с ключом по нашему выбору) и возвращает то, что мы получаем от вызова метода use, также по тому же ключу, который мы использовали для плагина.

Позвольте показать вам; это снова находится в файле main.js:

//your other imports go here...
import trackerVuex from '@openreplay/tracker-vuex';
import store from './store'

let {vuexTracker} = startTracker({
    userIdEnabled: true,
    projectKey: process.env.VUE_APP_OPENREPLAY_PROJECT_KEY,
    plugins:{
      'vuexTracker': trackerVuex
    } 
})

new Vue({
  router,
  store: store([vuexTracker]),
  render: h => h(App)
}).$mount('#app')

Обратите внимание, как мы:

1. Вызываем функцию startTracker с картой plugins. Строка «vuexTracker» — это то, что я придумал в тот момент, но здесь вы можете использовать любую строку.
2. Деструктурируем ответ и получаем ключ «vuexTracker» (тот же ключ, который мы использовали для карты). Пока эти два ключа совпадают, вы можете использовать любую строку.
3. Передаём функцию vuexTracker в качестве параметра в функцию store.

Переменная vuexTracker по сути содержит наш плагин VueX; этот плагин будет подключён к store VueX, и для этого мы используем следующий код:

import Vue from 'vue'
import Vuex from 'vuex'

import account from './account'
import product from './product'

Vue.use(Vuex)

export default function (plugins = []) {
  return function() {
    const Store = new Vuex.Store({
      modules: {
        account,
        product
      },

      strict: process.env.DEV,
      plugins
    })

    return Store
  }
}

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

Как только это будет готово, вы должны увидеть новую опцию VueX в повторах сессий, вот так:

Вы можете ознакомиться с этим репозиторием, чтобы получить полный исходный код работающего приложения, использующего VueX с Tracker.

Если у вас возникнут какие-либо проблемы при настройке Tracker или плагина VueX в вашем проекте, свяжитесь с нами в нашем сообществе Slack и задайте вопросы нашим разработчикам напрямую!