使用 vue 状态重新加载页面后，获取的数据消失答案

【问题标题】：fetched data disappears after page reload using vue state使用 vue 状态重新加载页面后，获取的数据消失
【发布时间】：2020-01-26 11:06:43
【问题描述】：

我正在从 api 获取数据这是商店里的动作

fetchVisits({commit}) {
            axios.get('/api/visits')
                .then(res => {
                    commit('FETCH_VISITS', res.data)

                }).catch(err => {
                console.log(err)
            })
        },
    }

变异

FETCH_VISITS(state, visits) {
            return state.visits = visits
        },

状态

state: {
     visits:[]
    },

吸气剂

getters: {
        visits: state => {
            return state.visits
        }

    },

调度操作

created() {
            this.$store.dispatch('fetchVisits')
        },

但是当我刷新页面时，要显示的数据消失了

【问题讨论】：

存储不持久化客户端数据。如果您的意图是持久化客户端数据，则需要一种方法将其存储在客户端上。 the vuex-persist plugin 就是这样做的。

标签： laravel vue.js

【解决方案1】：

使用 store.dispatch 方法触发操作。现在，在您的情况下，您可能错过了调度 fetchVisit 操作，或者也可能，您在不是主要组件的其他组件中调度了该操作。这就是为什么当你点击重新加载时调度方法没有被调用。解决这个问题。

您必须在主组件中调度 fetchVisit 操作，以便在每次重新加载页面时调用它。或者，您再次将该操作分派给您说状态为空的组件本身。这就是你派遣的方式

this.store.dispatch('fetchVisits')

【讨论】：

你怎么能说状态是空的？
我不知道为什么它是空的
那么你在哪里调度了这个动作？在您重新加载页面的同一组件上？
如何检查 state 是否为空？显示它