Question

为什么我的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>

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

Answer 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));
  }
};

Vuex数据仅显示一次，然后在重新加载后不显示

1 个答案: