Pinia는 Vue 프로젝트에서 VueX를 대체하는 상태 관리 라이브러리입니다. 예전에 VueX를 사용하던 곳에서 이제는 Pinia를 사용하게 됩니다. Pinia 플러그인을 사용하면 애플리케이션의 수명 주기 전반에 걸친 상태 변경을 추적할 수 있습니다.

다음 명령어로 플러그인을 간단히 설치할 수 있습니다.

npm i @openreplay/tracker-vuex

이 예제에서는 샘플 Vue 애플리케이션을 사용하여 실제 앱 안에서 이 플러그인을 추가하고 활용하는 방법을 보여 드립니다.

참고: 이 예제의 전체 소스 코드는 이 GitHub 저장소에 있습니다. 더 자세한 내용이 필요하면 확인해 보세요.

플러그인을 설치한 후 main.js 파일을 수정하여 아래 import 문을 추가합니다.

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 버전을 직접 사용하기 때문이며, 이 코드를 셀프 호스팅 버전에서 사용하려면 이 옵션을 지정해야 합니다. 값은 다음과 비슷한 형태가 됩니다. <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 플러그인을 적용한 Pinia/Vue 애플리케이션의 전체 소스 코드는 이 저장소에서 확인할 수 있습니다. 프로젝트에 Pinia 플러그인을 설정하는 중 문제가 생기면 Slack 커뮤니티로 문의해 주세요. 개발자에게 직접 질문할 수 있습니다!