Nuxt, composition-api(vue2) 및 SSR에서 Pinia를 사용하는 방법

Nuxt, composition-api(vue2) 및 SSR에서 Pinia를 사용하는 방법

Pinia가 Nuxt with SSR(서버 사이드 렌더링)에서 작업할 수 있도록 하려고 합니다.

Pinia를 사용하지 않고 페이지를 작성할 경우 다음과 같이 동작합니다.

<script>
import { reactive, useFetch, useContext } from '@nuxtjs/composition-api'

export default {
  setup() {
    const { $axios } = useContext()
    const invitesStore = reactive({
      invites: [],
      loading: true,
    })

    useFetch(async () => {
      invitesStore.loading = true
      await $axios.$get('invite/registermember').then((result) => {
        invitesStore.loading = false
        invitesStore.invites = result.invites
      })
    })

    return {
      invitesStore,
    }
  },
}
</script>

하지만 Pinia를 소개할 때 오류가 발생합니다."Converting circular structure to JSON --> starting at object with constructor 'VueRouter'"

Pinia를 이렇게 사용하고 있습니다.

// /store/invitesStore.js
import { defineStore } from 'pinia'

// useStore could be anything like useUser, useCart
export const useInvitesStore = defineStore({
  // unique id of the store across your application
  id: 'storeId',

  state() {
    return {
      invites: [],
      loading: true,
    }
  },
})

<script>
import { useInvitesStore } from '@/store/invitesStore'
import { reactive, onMounted, useFetch, useContext } from '@nuxtjs/composition-api'

export default {
  setup() {
    const { $axios } = useContext()
    const invitesStore = useInvitesStore()

    useFetch(async () => {
      invitesStore.loading = true
      await $axios.$get('invite/registermember').then((result) => {
        invitesStore.loading = false
        invitesStore.invites = result.invites
      })
    })

    return {
      invitesStore,
    }
  },
}
</script>

이걸 작동시킬 수 있을까요? 어떻게요?

언급URL : https://stackoverflow.com/questions/68438124/how-to-use-pinia-with-nuxt-composition-api-vue2-and-ssr