Home

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.