如果你使用 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
    }
}

现在你需要关注的是，这个函数能完成你所需要的一切。你所要做的只是在调用它时传入 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. 使用 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 社区 联系我们，直接向我们的开发人员提问！