Hi. I have the following page (sales.vue)
<template>
<div>
<params-form :params="settings.parameters" :name="settings.name" @gen-report="getReportData" class="mb-5"></params-form>
<transition name="slide-fade">
<report-table v-if="showReport" :fields="fields" :items="items"></report-table>
</transition>
</div>
</template>
<script>
import ParamsForm from '~/components/report/ParamsForm.vue'
import ReportTable from '~/components/report/ReportTable.vue'
import axios from '~/plugins/axios'
export default {
data () {
return {settings: {parameters: []}, showReport: false}
},
mounted: async function () {
const apiToken = this.$store.authToken
const { data } = await axios.get(`/api/login?api_token=${apiToken}`)
return {settings: data}
},
components: {
ParamsForm,
ReportTable
},
methods: {
getReportData () {
this.showReport = true
}
},
middleware: 'auth',
layout: 'authenticated'
}
</script>
I cannot access store and get auth token in mounted
hook becase, accordng to debugger, this = {}
in mounted hook.
But at the same time getReportData
method works fine.
Is there any limitation on using mounted on client side?
Currently I use spa mode, but at the end I want to use static generated files on production.
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2090">#c2090</a>)</em></sub></div>