Javascript Vue路由器&；Vuex:页面刷新时未定义getter

我想根据商店getters中存在的票据创建一个中间件

我首先使用查询初始化Vuejs以生成我的状态

TicketStore.js

const getters = {
    getTickets: state => state.tickets,
    getTicketById: (state) => (id) => {
        return state.tickets.find(ticket => ticket.id === id)
    },

    //get nb of ticket for tabs
    nbTicket: state => state.tickets.length
};


const actions = { 

   .... ,

getTicketsFromAPI({commit}) {
        axios.get(api.get, {
            headers: {
                'Access-Control-Allow-Origin': '*'
            }
        })
            .then((response) => {
                response.data.data.forEach(function (el) {

                    let dateFormat = require('dateformat')
                    let now = new Date(el.created_at)

                    commit('NEW_TICKET', {
                        id: el.id,
                        name: el.name,
                        msg: el.body,
                        date: dateFormat(now, "dd/mm/yyyy à H:MM:ss")
                    })
                })
            })
}

import Vue from 'vue'
import vuetify from './plugins/vuetify'
import routes from './routes/router.js'
import App from './pages/layout/App'
import TicketStore from '@/store/TicketStore'

Vue.config.productionTip = false

new Vue({
    vuetify,
    created() {
        TicketStore.dispatch('getTicketsFromAPI')
    },
    render: h => h(App),
    router: routes,
}).$mount('#app')

在main.js中初始化

const getters = {
    getTickets: state => state.tickets,
    getTicketById: (state) => (id) => {
        return state.tickets.find(ticket => ticket.id === id)
    },

    //get nb of ticket for tabs
    nbTicket: state => state.tickets.length
};


const actions = { 

   .... ,

getTicketsFromAPI({commit}) {
        axios.get(api.get, {
            headers: {
                'Access-Control-Allow-Origin': '*'
            }
        })
            .then((response) => {
                response.data.data.forEach(function (el) {

                    let dateFormat = require('dateformat')
                    let now = new Date(el.created_at)

                    commit('NEW_TICKET', {
                        id: el.id,
                        name: el.name,
                        msg: el.body,
                        date: dateFormat(now, "dd/mm/yyyy à H:MM:ss")
                    })
                })
            })
}

import Vue from 'vue'
import vuetify from './plugins/vuetify'
import routes from './routes/router.js'
import App from './pages/layout/App'
import TicketStore from '@/store/TicketStore'

Vue.config.productionTip = false

new Vue({
    vuetify,
    created() {
        TicketStore.dispatch('getTicketsFromAPI')
    },
    render: h => h(App),
    router: routes,
}).$mount('#app')

即使我不认为这是最合适的方式，这种方式仍然有效

现在，如果票证不存在，我想停止导航；因此，我在我的routes.js中创建了一个中间件

我首先尝试：

    {
        path: '/ticket/:id', component: Ticket, name: 'ticket',

        beforeEnter: (to, from, next) => {
            const id = to.params.id
            const ticket = TicketStore.getters.getTicketById(id)
            /* eslint-disable no-console */
            console.log(id, ticket, to);
            /* eslint-enable no-console */
            if (ticket && ticket.id === id) {
                next()
            } else {
                next(false)
            }
        }
    },

这种方法可以工作，但是如果我重新加载页面，

const ticket

没有定义

于是我搜索；我遇到过多次讨论，从来没有像这次这样真正帮助过我

我也试试这个

        beforeEnter: (to, from, next) => {
            const id = parseInt(to.params.id)
            /* eslint-disable no-console */
            console.log(TicketStore.state)
            TicketStore.state.tickets.forEach(function (el) {
                if (el.id === id) {
                    next()
                } else {
                    next(false)
                }
            })
            /* eslint-enable no-console */
        }

没有成功：这种方法行不通；但我在重新加载时把票放在控制台里了

我的目标是在票证不存在时停止导航，即使页面已重新加载

---

感谢您的帮助

您应该将

票证

定义为存储中默认的空数组。 因为目前看来，您似乎试图从存储中获取一些数据，直到数据不存在为止