vue查询pinia

Vue 中的 Pinia 是 Vue 3 的官方状态管理库，它提供了一种声明式的方式来组织和管理应用程序的状态。如果你想通过 Pinia 进行查询操作，你可以按照以下步骤：

1. **创建store**: 首先，在项目中创建一个新的 store，例如 `store.js` 或者 `store/index.js` 文件：

import { createStore } from 'pinia';

export const store = createStore({
  id: 'myStore',
  state: () => ({
    data: []
  }),
  actions: {
    fetchData() {
      // 这里是你从 API 或其他数据源获取数据的地方
      return new Promise((resolve) => {
        setTimeout(() => resolve({ myData: ['item1', 'item2'] }), 1000);
      });
    }
  },
  getters: {
    getData(state) {
      return state.data;
    }
  }
});

2. **注入store到组件**: 在需要使用数据的组件中，使用 `useStore` 插槽函数导入并注入这个 store：

<template>
  <div>
    <button @click="fetchData">Load Data</button>
    <ul v-for="(item, index) in data" :key="index">
      <li>{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import { useStore } from '@pinia/core';

const store = useStore(store);

async function fetchData() {
  try {
    await store.actions.fetchData();
    console.log('Data fetched');
  } catch (error) {
    console.error('Error fetching data:', error);
  }
  // 更新视图
  set(data, store.getters.getData);
}
</script>

3. **监听getter变化**: 如果你需要实时更新视图，可以监听 getters 的变化：

<script setup>
// ...
const { commit } = store;
watchEffect(() => {
  commit('updateData', store.getters.getData);
});
function updateData(newData) {
  data = newData;
}
</script>