Vue应用初始化时调用Pinia Store的getProducts方法方案

方法一：在根组件（App.vue）中触发 #

这是最直接的实现方式，利用Vue的onMounted生命周期钩子，在应用首次挂载时调用store方法：

<script setup>
import { onMounted } from 'vue'
import { useProductStore } from '@/stores/product' // 替换为你的store实际路径

const productStore = useProductStore()

onMounted(() => {
  // 应用首次加载完成后调用产品加载方法
  productStore.getProducts()
})
</script>

方法二：让Pinia Store自动初始化 #

如果希望store在被实例化时自动加载数据，可以借助Pinia的内置钩子或组合式API的生命周期：

选项式写法的Store #

// stores/product.js
import { defineStore } from 'pinia'

export const useProductStore = defineStore('product', {
  state: () => ({
    products: []
  }),
  actions: {
    async getProducts() {
      // 这里替换为你的实际产品加载逻辑（比如接口请求）
      const res = await fetch('/api/products')
      this.products = await res.json()
    }
  },
  // Pinia专属钩子，store创建时自动触发
  onMounted() {
    this.getProducts()
  }
})

组合式写法的Store #

// stores/product.js
import { defineStore } from 'pinia'
import { ref, onMounted } from 'vue'

export const useProductStore = defineStore('product', () => {
  const products = ref([])

  async function getProducts() {
    const res = await fetch('/api/products')
    products.value = await res.json()
  }

  // store实例化时自动调用加载方法
  onMounted(() => {
    getProducts()
  })

  return { products, getProducts }
})

方法三：通过路由全局守卫触发（适用于带路由的单页应用） #

如果希望在应用首次进入任意路由时加载数据，可以在路由配置中添加全局前置守卫：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { useProductStore } from '@/stores/product'
import { createPinia } from 'pinia'

const pinia = createPinia()
const router = createRouter({
  history: createWebHistory(),
  routes: [/* 你的路由配置列表 */]
})

router.beforeEach((to, from, next) => {
  // from.name为null表示应用首次加载
  if (!from.name) {
    const productStore = useProductStore(pinia)
    productStore.getProducts()
  }
  next()
})

export default router

注意事项 #

• 如果getProducts是异步方法，建议添加错误捕获逻辑，避免加载失败影响应用正常运行
• 若仅需应用首次加载时触发，方法一或三更合适；方法二会在store每次被实例化时都触发加载

内容的提问来源于stack exchange，提问作者Shaun