Actualiser la page les données vuex ne disparaissent pas et la page ne saute pas problème (tutoriel détaillé)

Cet article présente principalement la solution détaillée consistant à actualiser les données vuex de la page sans disparaître et sans passer à la page. Maintenant, je la partage avec vous et vous donne une référence.

Laissez-moi d'abord dire quelque chose

Vuex bricole l'interception de routage depuis un moment, et je m'en suis enfin sorti, je suis là pour le partager en premier. surtout, permettez-moi de préciser qu'il n'y a rien. Introduction de base, en utilisant la méthode de stockage de l'état de connexion sessionStorage !!!

Actualiser complètement Contrairement au redémarrage du projet, les données précédemment obtenues ne sont stockées que temporairement via le magasin et disparaissent à la fermeture du projet. C'est un peu comme si vous redémarriez l'ordinateur et que les données stockées dans la RAM le seraient. disparaître. Mais le contenu stocké dans le stockage de session, le stockage local et les cookies ne disparaîtra pas.

Vuex

Méthodes et idées

Premier de Tous familiers avec vuex, le site officiel introduit que Vuex est un modèle de gestion d'état spécialement développé pour les applications Vue.js, c'est-à-dire que les données dans le magasin dans vuex sont temporaires et constituent certaines variables lorsque la page est actualisée et rechargée. , tout sera effacé. , et il n'y a pas eu de seconde connexion dans la page, la vuex a toujours été vide, donc plusieurs méthodes ont été dérivées

1 Actualiser la page car sessionstorage (la page disparaîtra quand. fermeture de la page), stockage local et cookie Les données ne disparaîtront pas, vous pourrez donc y stocker toutes les données demandées et les récupérer lorsque vous les utiliserez

2. Utilisez le plug-in vuex

3. Lors de la connexion, mettez le jeton et l'état de connexion (personnalisé). Attribuez la valeur au stockage de session Lors de l'actualisation de la page (saut d'itinéraire), obtenez le jeton et l'état de connexion du stockage de session et attribuez-le au magasin, et il sera réinitialisé. -demander les données de la page concernée

Après réflexion, j'ai choisi la méthode 3, mais cette méthode doit être combinée avec l'interception de routage Une fois le routage terminé, poster le code

code

index

actions

Routage

Une brève introduction : L'interception d'itinéraire équivaut au « cycle de vie » de l'itinéraire. L'insertion d'une méthode à différentes périodes de l'itinéraire peut Si vous souhaitez faire quelque chose pendant cette période, vous ne le ferez qu'avant le saut d'itinéraire cette fois-ci, donc. utilisez simplement router.beforeEach((to, from, next) => { // ... }), spécifiquement Le contenu du site officiel est très détaillé

main.js

// 登录
 Login({ commit, state }, userInfo) {
  return new Promise((resolve, reject) => {
   login(userInfo).then(response => {
    let token = response.data.token;
    commit('SET_TOKEN', token);
    sessionStorage.setItem('token', token);  //获取到新的token的时候赋值给sessionStorage

    commit('SET_ISLOGIN', true);  // 登录成功修改store中的登录状态
    resolve()
   }).catch(error => {
    reject(error)
   })
  })
 },

pits

1. J'ai écrit l'interception de routage dans le fichier main.js, veuillez noter qu'elle doit être écrite au-dessus du montage vue (nouvelle Vue)

2. Lorsque vous cliquez sur connexion, la méthode de connexion dans les actions doit être antérieure à l'interception de l'itinéraire

3. N'oubliez pas d'ajouter sessionStorage lors de la déconnexion. Supprimez les variables dans

router.beforeEach((to, from, next) => {
 let isLogin = sessionStorage.getItem('isLogin');
 let token = sessionStorage.getItem('token');
 let id = sessionStorage.getItem('id');
 if (to.meta.requireAuth) {  // 判断是否有权限
  if (!store.state.isLogin && !isLogin && to.path !== '/login') {  // store和sessionStorage中登录状态都为false并且跳转到 不是登录的页面时 都强行跳转到登录页面  
   next({
    path: '/login',
   });
  } else if (!isLogin && to.path !== '/login') {  // 已经在登录页面进入首页的时候
   sessionStorage.setItem('isLogin', store.state.isLogin);
   next();
  } else if (isLogin && to.path !== '/login') {  // 登录进入后刷新页面时
   store.commit('SET_TOKEN', token);
   store.commit('SET_ISLOGIN', isLogin);
   store.commit('SET_ID', id);
   next();
  } else {
   next();
  }
 }
 else {
  next();
 }
});

Ce qui précède est ce que j'ai compilé pour tout le monde. j'espère que cela sera utile à tout le monde à l'avenir. Articles associés :

Comment appeler json en utilisant js

Utiliser le recadrage gm dans les images composites sous Nodejs

Comment utiliser le tutoriel d'installation et de configuration de Babel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!