怎么在Nuxt3中使用Pinia

Question

目前我已经在nux3中使用上pinia了。

但是在原来Nuxt2项目中，是提供了一个方法 nuxtServerInit 用来在项目启动的时候，可以请求接口并修改vuex中stores里面的值。

想问一下，如果我在Nuxt3中使用了Pinia,那么有什么方式能类似nuxtServerInit这样，在项目加载前就做到类似的功能呢。

nuxtServerInit 这个关键字 我在Nuxt3官网和 git仓库都没有搜索到有价值的内容，希望在这里问一下

Answer 1

内事不觉问度娘，外事不觉问谷歌

一个workaround

https://github.com/vuejs/pini...

The only way I found to do this is using Pinia with Vuex, using the nuxtServerInit from Vuex

// store/index.js
import { useSessionStore } from '~/stores/session'

export const actions = {
  async nuxtServerInit ({ dispatch }, { req, redirect, $pinia }) {
    if (!req.url.includes('/auth/')) {
      const store = useSessionStore($pinia)

      try {
        await store.me() // load user information from the server-side before rendering on client-side
      } catch (e) {
        redirect('/auth/login') // redirects to login if user is not logged in
      }
    }
  }
}

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。