pinia中数据如何在vue3展示

在Vue 3中，展示Pinia中的数据与展示Vue 2中的数据基本相同。

首先，您需要在组件中导入Pinia实例。这可以通过以下方式完成：

import { defineComponent } from 'vue'
import { useStore } from 'pinia'

export default defineComponent({
  setup() {
    const store = useStore()

    // ...
  }
})

在组件中，您可以使用Vue 3的Composition API来访问Pinia store中的数据：

import { defineComponent } from 'vue'
import { useStore } from 'pinia'

export default defineComponent({
  setup() {
    const store = useStore()

    const count = computed(() => store.state.count)

    return {
      count
    }
  }
})

在模板中，您可以像往常一样使用计算属性（computed）来展示Pinia store中的数据：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { useStore } from 'pinia'

export default defineComponent({
  setup() {
    const store = useStore()

    const count = computed(() => store.state.count)

    function increment() {
      store.commit('increment')
    }

    return {
      count,
      increment
    }
  }
})
</script>

在上面的示例中，我们使用computed属性获取Pinia store中的count数据，然后在模板中展示它。在按钮的点击事件中，我们使用store.commit方法来更新count数据。

希望这可以回答您的问题！