Vuex数据只显示一次然后重新加载后不会显示答案

【问题标题】：Vuex data just show once then won't display after reloadingVuex数据只显示一次然后重新加载后不会显示
【发布时间】：2020-03-10 03:35:11
【问题描述】：

为什么我的 json 数据只显示一次，并且在重新加载页面后它不会再次显示。

我错过了什么吗？

import axios from "axios";

const store = {
    careers: []
};
const getters = {
    allCareers: (state) => state.careers

};
const mutations = {

    RETRIEVE_CAREERS: (state, career) => (state.careers = career),
};
const actions = {
    async careers({ commit }) {
        try {
            const response = await axios.get('http://localhost:9001/career/jobs/');
            commit('RETRIEVE_CAREERS', response.data);
        } catch (err) {
            console.log(err);
        }
    },
};
export default {
    store,
    getters,
    mutations,
    actions
}

在我的组件中我这样做：

import { mapActions, mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters([
      "allCareers"
      /* more getters here if necessary */
    ])
  },
  methods: {
    ...mapActions(["careers"])
  },
  created() {
    this.careers();
  }
};

在模板中我只是这样做：

<template>
  <section>
    <v-card>
      {{allCareers}}
    </v-card>
  </section>
</template>

为什么只显示一次，重新加载页面后不显示？

【问题讨论】：

控制台中有任何消息？
在我的操作中，我尝试使用 console.log 并成功检索数据，但是当传递给我的组件时它无法接收数据
我看不出你的代码有什么问题。要么用一些日志记录你的代码，以收集更多关于发生的事情的洞察力，要么在像 codesandbox.io 这样的网站上重新创建最小示例并发布链接
尝试将 'console.log('created')' 添加到 created 钩子中，以测试在重新加载页面时它是否被调用。

标签： vue.js vuejs2 vuex

【解决方案1】：

我没有看到您在任何地方“保留”获取的数据。 Vuex 不会在重新加载时保留数据，它充当内存存储

您仍然需要将数据保存到某种类型的本地存储中，例如 localStorage 或 indexedDB。

这是一个简单的解决方案：

const store = {
    careers: JSON.parse(localStorage.getItem('careers') || '[]');
};

const mutations = {
  RETRIEVE_CAREERS: (state, career) => {
    state.careers = career;
    localStorage.setItem('careers', JSON.stringify(career));
  }
};

【讨论】：

顺便说一句，如果您每次都从 API 加载数据，则不需要在本地存储数据（这正是相关代码中发生的情况）...
是的，但我不确定他们是否在谈论为什么消息没有立即出现，应该先要求澄清。