Pinia 是用于 Vue 项目的状态管理库，它取代了 VueX。以前你使用 VueX 的地方，现在将改用 Pinia。借助我们的 Pinia 插件，你可以在应用的整个生命周期中跟踪状态变化。

可以使用以下命令轻松安装该插件：

npm i @openreplay/tracker-vuex

在本示例中，我们将使用一个示例 Vue 应用来展示如何在真实应用中添加并使用该插件。

注意：本示例的完整源代码位于这个 GitHub 仓库，如果你需要更多细节，可以查看它。

安装插件后，我们将修改 main.js 文件，添加下面的导入语句：

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

然后，我们将使用 startTracker 函数来实例化 tracker，并同时使用该插件。

调用此函数的结果将是一个对象，其中包含对插件调用 use 方法所返回的结果。

注意解构属性的名称与 name 属性的值相同。只要保持这两者一致，就没有问题。

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

接下来要做的是创建一个具名的 store 包装器，稍后我们将用它在目标 store 上设置该插件。

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

piniaStoreWrapper 稍后需要与我们决定跟踪的 store 一起使用。然而，此时 store 还尚未创建，因此我们将通过 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
    }
}

此函数会使用我们提供的配置来实例化 tracker。请注意，我把 ingestPoint 选项注释掉了，这是因为我们直接使用的是 SaaS 版本；但如果你想在自托管版本中使用这段代码，就必须指定它，它应该类似于这样：<your-instance>.yourhost/ingest

当所有设置代码都准备就绪后，前往你使用 store 的地方；在我们的示例中，让我们编辑 App.vue 文件以调用 getStore 函数，它会返回我们之前保存的 store 包装器。

然后我们将用它来包装我们想要跟踪的 store：

<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 标签页：

点击它后，你将看到 store 的内容，并能够了解它是如何变化的以及其中保存的数据：

注意 store 的名称，它正是我们第一次调用 Pinia 插件时所使用的名称。

你可以查看这个仓库，获取一个使用 Pinia 插件的可运行 Pinia/Vue 应用的完整源代码。如果你在项目中设置 Pinia 插件时遇到任何问题，请在我们的 Slack 社区联系我们，直接向我们的开发者提问！