vue3 pinia iframe

在Vue 3中使用Pinia管理状态，您可以在iframe中使用Pinia的方式与在主应用程序中使用它类似。下面是一个基本的示例：

首先，在主应用程序中安装和配置Pinia：

npm install pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')

然后，在iframe中也安装和配置Pinia：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import IframeApp from './IframeApp.vue'

const app = createApp(IframeApp)
const pinia = createPinia()
app.use(pinia)
app.mount('#iframe-app')

接下来，在主应用程序或iframe中定义和使用状态：

// 在主应用程序或iframe中定义状态
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    },
  },
})

<!-- 在主应用程序或iframe的组件中使用状态 -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounterStore } from './store'

export default {
  setup() {
    const counterStore = useCounterStore()

    return {
      count: counterStore.count,
      increment: counterStore.increment,
      decrement: counterStore.decrement,
    }
  },
}
</script>

这样，您就可以在Vue 3应用程序的主应用程序和iframe中使用Pinia来管理状态了。请注意，iframe中的状态将是独立的，不会与主应用程序共享。如果您希望在iframe和主应用程序之间共享状态，您需要使用其他技术，如window.postMessage()来进行通信和同步状态。