vue3 选项式API 在组件中如何获取pinia store中的值

Vue 3 中的选项式 API 提供了一种简洁的方式来访问 Pinia store 中的数据。Pinia是Vue3官方推荐的状态管理模式，它基于Vuex的设计思想。要在组件中通过选项式API获取store中的值，你可以按照以下步骤操作：

1. 首先，在`setup()`函数中导入你需要的store实例。假设你的store名为`store`，可以这样导入：

   import { useStore } from '@/store';
   const store = useStore();

2. 然后，你可以直接使用`store.state`或`store.getters`来获取state或计算属性的值，例如：

   const valueFromState = computed(() => store.state.yourProperty);
   const valueFromGetter = computed(() => store.getters.yourGetter);

3. 如果你想监听store的变化，可以使用`watchEffect`或`onMounted`等生命周期钩子：

   onMounted(() => {
     watch(store, (newVal) => {
       // 当store变化时执行这个回调
       console.log('Store updated:', newVal);
     }, { deep: true });
   });

4. 获取完数据后，就可以在模板中使用`v-bind`或`ref`结合`valueFrom*`计算属性来显示store中的值了。