[Vuejs]-How can I keep the state saved when I coming to same route component from another in vuejs?

by

0👍

According to your question-

  1. You need to keep some values saved when changing the route and some values to refresh as per API requests. (keep-alive won’t do much in that use case.)
  2. the values which need to persist are either a form variable (select dropdown) or some manual variable (pagination number).

As you said you can’t use Vuex because of some problems, My guess, is that Vuex and vuex-map-fields together should ease the process of your problem.

vuex-map-fields is a good way to enable two-way data binding for fields saved in a Vuex store.

If I take your question as an example-
Suppose at your Home.vue you change the dropdown value, and on its changes, an API request gets fired and brings some data which you display on your component, and you can select any data which will lead to a new route, let’s say About.vue and when you come back to Home.vue the year you selected should persist.

So, you can do this by like this-

  1. Install the vuex-map-fields and configure it properly.
  2. Create a property in your Vuex state of name, "selectedYear", like this-
import Vuex from "vuex";
// Import the `getField` getter and the `updateField`
// mutation function from the `vuex-map-fields` module.
import { getField, updateField } from "vuex-map-fields";

Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    selectedYear: null
  },
  getters: {
    // Add the `getField` getter to the
    // `getters` of your Vuex store instance.
    getField
  },
  mutations: {
    // Add the `updateField` mutation to the
    // `mutations` of your Vuex store instance.
    updateField
  }
});
  1. In your Vue template, use this Vuex state property to get and mutate the selectedYear.
<select v-model="selectedYear" @change="callAPI()">
    <option>2020</option>
    <option>2021</option>
    <option>2022</option>
</select>

import { mapFields } from "vuex-map-fields";

export default {
  name: "Home",

  computed: {
    // The `mapFields` function takes an array of
    // field names and generates corresponding
    // computed properties with getter and setter
    // functions for accessing the Vuex store.
    ...mapFields(["selectedYear"]),
  },
}

And when you want to reset the dropdown state, simply do this-

this.selectedYear = null;

It will update in the Vuex state as well.

In that way, you should notice that when you switch the route, the selected box state will persist because this is bonded with the store.
In the same fashion, you can keep the state of pagination, and another variable you want.
The benefit of using vuex-map-field is that you don’t need to write getter and setter functions manually to contact the state.

Note- If you want to persist your Vue state between page reloads also, then use vuex-persistedstate with Vuex.

As your code depends on multiple concepts, I cannot provide the snippet here, but I created a fiddle and try to reproduce the problem, you can look at it, and modify it according to your case and make sure things work.

In the fiddle, I used the same problem mentioned in your question (but the data and API request is dummy), and you should see when you change the routes (from Home.vue to About.vue), the year would persist but when reload the page it won’t because I didn’t use vuex-persistedstate.

Here it is- https://codesandbox.io/s/vue-router-forked-mdvdhd?file=/src/views/Home.vue:935-1181

Leave a comment