Because the component does not have an asyncData method, you cannot directly obtain asynchronous data on the server side of the component. To get around this limitation, you have three basic options:
1. Use the new fetch hook function available in n u _ _
2. Call the API in the mounted hook and set the data attributes when loading. Disadvantage: Cannot be used for server-side rendering.
3. Call the API in the asyncData method of the page component and pass the data to the child component as props . Server rendering will work just fine. Disadvantages: The page's asyncData may be less readable because it is loading data for other components.
The fetch method is a method that is called before the component is instantiated. It can access the context of the component using the this keyword. The asyncData method is a method called before server-side rendering . It does not have the context of component instantiation, so the this keyword
async fetch({ store, params }) {
//You need to use async await or return to return a promise (Nuxt.js will wait for this promise to complete before rendering the component)
let ret = await this.$axios.get('/api/v1/getNowPlayingFilmList')
this.films = ret.data.data.films;//Component data settings
store.commit(setStars, data);//store data settings
}