About Initial State with fetching data...

[leosin]

(Translation)🤭

Recently, I'm having some problems with Initial State，When the ssg generates the page, the data requested by axios is never initialized.

Am I doing something wrong?

Here's a simple example， State management uses pinia.

Reproduction link：https://stackblitz.com/edit/vitejs-vite-wafscg?file=src/pages/index.vue

最近在使用vite-ssg插件的初始化数据功能，遇到一些瓶颈。

不知道是哪里写的不对

在ssg生成页面的时候，始终没有初始化axios请求过来的数据。

以下是我写的一个简单的小例子。状态管理用的是pinia。

线上地址：https://stackblitz.com/edit/vitejs-vite-wafscg?file=src/pages/index.vue

/src/pages/index.vue

import axios from 'axios';
import {useRouter} from 'vue-router'
import { useTodoStore } from '/src/stores/todo';
const router = useRouter()
const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 10000,
});

const todoList = useTodoStore();
instance
  .get('/todos', {
    params: {
      userId: 1,
    },
  })
  .then((res) => {
    todoList.setList(res.data);
  })
  .catch((error) => {
    console.log(error);
  });
const list = computed(() => todoList.getList);

<template>
  <div class="">home</div>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      id:{{ item.id }}, User : {{ item.userId }} , Title : {{ item.title }}
    </li>
  </ul>
</template>

/src/stores/todo.ts

import { acceptHMRUpdate, defineStore } from 'pinia'

interface ListItem {
  id: number | null | string;
  userId: number | null | string;
  title: string | null;
}

interface TodoStore {
  list: ListItem[];
  title: string;
}

export const useTodoStore = defineStore({
  id: 'todoStore',
  state: (): TodoStore => ({
    list: [], // By fetching the data
    title: 'Todo Page' // Data written directly
  }),

  getters: {
    getList(): ListItem[] {
      return this.list;
    },
  },

  actions: {
    setList(data: ListItem[]) {
      this.list = data;
      console.log('Initialize list ...');
    },
  },
});

if (import.meta.hot)
  import.meta.hot.accept(acceptHMRUpdate(useTodoStore, import.meta.hot));

/src/modules/pinia.ts

import { createPinia } from 'pinia'
import type { UserModule } from '~/types'

export const install: UserModule = ({ isClient, initialState, app }) => {
  const pinia = createPinia()
  app.use(pinia)

  if (isClient)
    pinia.state.value = (initialState.pinia) || {}
  else
    initialState.pinia = pinia.state.value
}

The generated page