如果你使用 VueX 来管理基于 Vue 的应用的状态，那么集成 OpenReplay 的插件 来追踪状态更新非常简单。

如果你想跟着一起操作，请使用此处发布的代码。

我们首先需要关注的是将 OpenReplay 的 tracker 集成到项目中。我们处理的是一个基于 Vue 的项目，这意味着我们的入口点将是 main.js 文件。首先使用以下命令安装 tracker：

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，它将配置好一切并启动 tracker。

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
    }
}

现在你需要关注的是，这个函数会完成你所需的一切。你需要做的就是在调用它时传入项目密钥。像这样（来自 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 这一行将在页面渲染时被替换为你实际的项目密钥。

现在，让我们添加 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. 使用 plugins 映射调用 startTracker 函数。字符串 “vuexTracker” 是我当时随手起的，但你在这里可以使用任意字符串。
2. 对响应进行解构，并取出键 “vuexTracker”（与我们用于映射的键相同）。只要这两个键匹配，你就可以使用任意字符串。
3. 将 vuexTracker 函数作为参数传递给 store 函数。

vuexTracker 变量本质上包含了我们的 VueX 插件，这个插件将被挂接到 VueX store 中，为此我们使用以下代码：

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 社区 联系我们，直接向我们的开发人员提问！