Vue Router+Vuex implémente la sauvegarde de l'état arrière

Cette fois, je vais vous présenter Vue Router+Vuex pour réaliser la sauvegarde de l'état arrière. Quelles sont les précautions concernant la réalisation de la sauvegarde de l'état arrière par Vue Router+Vuex. Ce qui suit est un cas pratique. . Jetons un coup d'oeil.

Désolé, le titre est un peu long, car cette fois le compte courant est effectivement une chose relativement détaillée, parlons-en en détail ci-dessous :

1 demande

J'ai récemment utilisé Electron-Vue pour développer un logiciel de bureau multiplateforme. Je viens de commencer à écrire quelques pages à la main et j'ai rencontré un problème : les logiciels de bureau ont généralement des exigences de navigation

. Cliquez sur le bouton retour pour revenir à la page précédente et afficher le contenu de la page précédente. En fait, non seulement les applications, mais aussi les pages Web ordinaires auront de telles exigences, en particulier lors de l'utilisation de vue pour écrire du SPA.

La navigation dans le projet utilise presque toujours router.push({name : 'xxx', params : {xxx:123...}}) par ici. Un problème direct causé par cette approche est le suivant : lorsque l'on clique sur le bouton retour (appel router.go(-1)), seule l'URL est enregistrée dans l'historique et l'objet params est perdu, ce qui provoque des exceptions de rendu de page qui reposent sur les paramètres.

2 Solutions

En fait, l'idée est très simple Puisque les paramètres sont perdus lors de l'opération back, alors on pensera naturellement : comment sauvegarder les paramètres ! C'est vrai, c'est tellement grossier Puisque tu veux le jeter, je le garde pour toi !

Comment sauvegarder : En fait, vous n'avez pas à y penser. Il s'agit d'un problème de communication entre composants, donc naturellement, utiliser Vuex pour sauvegarder est le plus bon sens !

Quand enregistrer : La première réaction est d’appeler router.push({name : 'xxx', params : {xxx:123...}}), puis si vous revenez à cette URL, s'il n'y a pas de paramètres, essayez de la sauvegarder depuis vuex Récupérez-le en magasin. Cela semble juste, mais c'est un peu gênant ! ! Pas de panique, nous avons un routeur de crochet de navigation.avantChacun((vers, depuis, suivant) => { // ... }) Ah !

Comme son nom l'indique, le crochet de navigation fourni par vue-router est principalement utilisé pour intercepter la navigation et la laisser terminer le saut ou l'annuler.

À ce stade, vous devriez bien comprendre ma solution, donc je ne vais pas entrer dans trop de bêtises ci-dessous, voici le code :

/*
Vuex store 定义存储对象RouterParams
*/
//...
const state = {
 //定义一个存储map，key：导航name，value：导航params
 paramMap: {}
}
const mutations = {
 REFRESHPARAM (state, paramKV) {
 //mutation，应该能看懂做的操作吧？
 Vue.set(state.paramMap, paramKV.key, paramKV.value)
 }
}
//...

/*
router中设置一个全局导航钩子
*/
const router = new VueRouter({ ... }) //router
router.beforeEach((to, from, next) => {
 // 只有在找不到params时才"出此下策"
 if (Object.keys(to.params).length === 0) {
 // 从store中取出付给params，此处注意路径未必完全吻合，以你的为准
 Object.assign(to.params, store.state.RouterParams.paramMap[to.name] || {})
 }
 // 存储一下params备用
 store.commit('REFRESHPARAM', {key: to.name, value: to.params})
 next() // 千万不要忘了，否则导航会被“掐死”在这儿。:-D
})
//...

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, et plus encore Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Ouverture et fermeture du navigateur d'opération JS

Comment encapsuler Canvas dans un plug-in avec js

js utilise des expressions régulières pour vérifier la force du mot de passe

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!