Vuex combines storage to realize local storage of user information

During my own learning process, I encountered a new page filled in by the user, so I thought that I could not fill in the page all the time after refreshing. Wow, I was so tired, so I thought of the offline storage mechanism. Here I use the good-storage packaging library combined with Vuex to implement this function. Take a note here.

First install the plug-in library good-storage

npm install good-storage

Introducing good-storage where you write the offline storage logic section

Disk it. Now~, here is the storage logic of some user information I wrote

import storage from "good-storage"    //Introduceconst USER_DATAS="__userdatas__"      //Define key value 
//User information storage, a parameter is passed here as an objectexport function saveUserData(obj){
    let userDatas=(USER_DATAS,{});   //Get the stored value, if not, return an empty object    if(){
        =;
    }
    if(){
        =;
    }
    if(){
        =;
    }
    if(){
        =;
    }
    if(){
        =;
    }
    (USER_DATAS,userDatas);
    return userDatas;
}
 
//Get the information stored locally by the user. If it has not been stored, return an empty objectexport function loaduserDatas(){
    return (USER_DATAS,{});
}

Next is the code part that defines vuex

as follows

import {loaduserDatas} from "common/js/cache"  //Introduce it here according to your own pathconst state={
    user_datas:loaduserDatas()       //Get user information}
export default state

Map data in state to facilitate the introduction of data in external components

export const user_datas = state => state.user_datas;

export const SET_USERDATA="SET_USERDATA"

Submit the modified obj object, that is, user information

import * as types from "./"
const mutations={
    [types.SET_USERDATA](state,obj){
        state.user_datas=obj
    }
}
export default mutations;

Because it is possible to modify multiple user information content at the same time, we choose to use action for asynchronous operation and submit mutation

//Also import the required files according to your own directory 
import {saveUserData} from "common/js/cache"
import * as types from "./"
export const saveUserDatas=function({commit},obj){
    commit(types.SET_USERDATA,saveUserData(obj))
}

Operation in external components is as follows

My file is

&lt;script&gt;
import {mapGetters,mapActions} from "vuex";
export default{
     data() {
        return {
          dateStr:,
          showDate:false,
          nickName:"",
          revise:false,
          showNicknameMod:false,
          userDatasObj:{
              name:"",
              phone:'18419954234',
              sex:'',
              education:'Undergraduate degree',
              industry:'Internet e-commerce'
          }
        }
      },
 
      computed:{
          selectedDate(){
              return  ?  :  ;
          },
          _nickName(){
              if(){
                  return ;
              }else{
                  if( !this.user_datas.name){
                      return "Please enter a nickname"
                  } 
                  else{
                      return this.user_datas.name
                  }
              }
          },
          _sex(){
              if(!this.user_datas.sex){
                  return "Please select"
              }
              return =this.user_datas.sex;
          },
          _selectEdu(){
              if(!this.user_datas.education){
                  return "Please select"
              }
              return =this.user_datas.education;
          },
          _industry(){
              if(!this.user_datas.industry){
                  return "Please select"
              }
              return =this.user_datas.industry;
          },
        
        //Get the original information of the user and make corresponding logical judgments to see your own situation.  The above is my personal          ...mapGetters([
              "user_datas"
          ])
      },
        methods:{
               
            savedInfo(){
                ();
                
            },
 
            //Introduce the submission information operation in action, call it directly when saving the information, and pass in the information object parameters              ...mapActions([
                  "saveUserDatas"
              ])
        },
    }
&lt;/script&gt;

The above is personal experience. I hope you can give you a reference and I hope you can support me more.