Why can't I load data from vuex when I refresh site?

Question

The data is loaded into the task array and I see in vue developer tool. When you refresh the page, the resulting array from vuex is empty

Vuex file:

export const timelineState = {
  tasks: [],
};

export const timelineMutations = {
  getTasks(state, value) {
    state.tasks = value;
  }
};
export const timelineActions = {
  getByProjects({ commit }, query) {
    timelineApi.getByProjects(query)
      .then((respons) => {
        commit("getTasks", respons.data);
      })
      .catch((error) => {
        console.log(error);
      });
  },
};

Vue file:

export default {
  name: "Timeline",
  data() {
    return {
      t: []
    }
  }
  methods: {
    ...mapActions("timeline", [
      "getByProjects"
    ]),
  },
 computed: {
    ...mapState("timeline", [
      "tasks",
    ]),
  },
  created() {
    let query = {
      dateFrom: this.dateFrom,
      dateTo: this.dateTo,
    };
    this.getByProjects(query);
    this.t = this.tasks
  },
}

When I navigate to the page it loads the data but if I refresh it it doesn't. The data would be needed because it needs to be sorted. I found a way to save it to local storage but I don't want to store the data. i read vuex-persistedstate but i don't know if it's a good solution because it isn't maintained

Answer 1

Vue is a SPA framework and SPAs doesnot support page refresh.

I recommend you to use vuex-persistedstate npm package to prevent daa loss on page refresh.

https://www.npmjs.com/package/vuex-persistedstate

Eventhough they have stopped the supprt, this still supprts the latest version of Vue JS and VueX