结合使用nuxtServerInit和Typescript和vuex进行初始服务器端渲染

问题描述

我正在我的使用打字稿的Nuxt应用程序中尝试使用nuxtServerInit。我不确定如何将其集成到我的代码中，因此使用该操作首先获取的api数据是服务器端。我尝试使用asyncdata，但无法正常工作。我希望getMovies Action具有nuxtServerInit。这是我的代码。

（P.S。我正在使用模块和vuex）

store / index.ts

import { getModule } from 'vuex-module-decorators'
import { Store } from 'vuex'

import MoviesModule from '~/store/movies'
import PeopleModule from '~/store/people'

// eslint-disable-next-line import/no-mutable-exports
export let moviesstore: MoviesModule
// eslint-disable-next-line import/no-mutable-exports
export let peopleStore: PeopleModule

function initializeStores (store: Store<any>): void {
  moviesstore = getModule(MoviesModule,store)
  peopleStore = getModule(PeopleModule,store)
}

export const plugins = [initializeStores]

商店/电影.ts

import { Module,VuexModule,Mutation,Action } from 'vuex-module-decorators'
import axios from 'axios'

const apiKey: string | undefined = process.env.API_KEY
const moviesUrl: string = `https://api.themoviedb.org/3/movie/top_rated?api_key=${apiKey}`

interface MoviesData {
  id: number
  title: string
  poster: string
  rating: number
}

@Module({
  name: 'movies',stateFactory: true,namespaced: true
  // store
})

export default class MoviesModule extends VuexModule {
  moviesList: MoviesData[] =[]

  @Mutation
  setMovies (movies: MoviesData[]) {
    return (movies.map((movie: any) => {
      const result : MoviesData = {
        id: movie.id,title: movie.title,poster: 'https://image.tmdb.org/t/p/original' + movie.poster_path,rating: movie.Vote_average
      }
      this.moviesList.push(result)
    }))
  }

  @Action({ commit: 'setMovies' })
  async getMovies () {
    const response = await axios.get(moviesUrl)
    const movies = response.data.results
    return movies
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）