vue3中用pinia写hooks

在Vue 3中，使用Pinia作为状态管理库时，如果你想创建类似于React Hooks的功能，可以利用Pinia提供的`store`对象来封装一些数据获取、修改以及订阅的变化。Pinia的Store API允许我们轻松地处理组件间的通信和状态共享。

首先，确保已经安装了`@vue/pinia`库。然后你可以按照以下步骤来实现类似Hooks的功能：

1. **创建store**: 在你的项目中创建一个`store.js`文件，导入`createStore`函数并初始化你的数据模型：

import { createStore } from '@vue/pinia'
import types from './types'

export const useStore = createStore({
  id: 'myStore',
  state: () => ({
    // 初始化的状态
    data: []
  }),
  actions: {
    fetchData() {
      // 这里模拟异步请求
      return new Promise((resolve) => setTimeout(resolve, 1000, ['data1', 'data2']))
    }
  },
  mutations: {
    setData(state, newData) {
      state.data = newData
    }
  },
  getters: {
    getData: (state) => state.data
  },
  plugins: [/* 可选的插件配置 */]
})

2. **封装Hook**: 创建一个名为`useMyDataHook.js`的文件，模拟`useState`或`useEffect`的Hook行为：

import { useStore } from '@/store/store'

export default function useFetchData() {
  const store = useStore()
  const [data, setData] = reactive([])

  useEffect(() => {
    async function fetchData() {
      try {
        const result = await store.actions.fetchData()
        setData(result)
      } catch (error) {
        console.error('Error fetching data:', error)
      }
    }

    fetchData()
  }, []) // 空依赖数组使得fetchData只在首次加载时运行

  return {
    data,
    fetchData: fetchData
  }
}

现在你就可以在组件中使用这个自定义的Hook了：

import { useFetchData } from '@/hooks/useFetchData'

export default {
  setup() {
    const { data, fetchData } = useFetchData()

    // 使用数据和触发数据更新
    return { data, fetchData }
  },
  // ...
}