Vuex stores information, and after refreshing the page, the data is gone. Is there any way to keep the data?

in fact, there are two questions, please advise
1: vuex dispatch getUserInfo, normally no problem, after refreshing the page, there is no way to get the data. Is there any way to solve this problem and save the local cache? no, no, no. If you save the local cache. Then why use vuex.

2: it is also a problem with vuex. I use .mapGetters (["getUserInfo"]) to jump to the page in computed, the data is normal, but use

    computed: {
    getUserInfo:function(){
      return this.$store.getters.getUserInfo
    }
  }

this is empty. Please tell me the difference between the mapGetters mapping and the this.$store method

Thank you all for your advice.

Vuex vue-cli vue.js

Mar.12,2021

take the userInfo and save a copy in the Local Storage, and then take the value of Local Storage
and put it in the vuex when the page loads. Ensure access to Synchronize.

vuex is also used to store only a global variable, when the page refreshes, the global variable naturally does not exist.
user information is recommended to be stored in localStorage to store a
localStorage.setItem (key, value) / / storage data. Value is of string type. If you want to save an object, first convert
localStorage.getItem (key) / / to get data

second question return this.$store.getters.getUserInfo
change it to return this.$store.getters ['getUserInfo']

Previous: How to call the mutations of another module in the action of one module by vuex in nuxt

Next: How to add a separate transition animation to an item of a list during the transition of vue's transition-group list