Vue Router+Vuex implementiert die Speicherung des Back-State

Dieses Mal werde ich Ihnen Vue Router+Vuex vorstellen, um die Rückwärtsstatusspeicherung zu realisieren. Was sind die Vorsichtsmaßnahmen für Vue Router+Vuex, um die Rückwärtsstatusspeicherung zu realisieren? Fall. Werfen wir einen Blick darauf.

Tut mir leid, der Titel ist etwas lang, denn dieses Mal ist der laufende Bericht tatsächlich eine relativ detaillierte Sache, lasst uns weiter unten ausführlich darüber sprechen:

1 Nachfrage

Ich habe kürzlich mit Electron-Vue eine plattformübergreifende Desktop-Software entwickelt. Ich habe gerade angefangen, ein paar Seiten handschriftlich zu schreiben, und bin auf ein Problem gestoßen: Desktop-Software hat normalerweise Navigation-Anforderungen

Klicken Sie auf die Schaltfläche „Zurück“, um zur vorherigen Seite zurückzukehren und den Inhalt der vorherigen Seite anzuzeigen. Tatsächlich stellen nicht nur Apps, sondern auch normale Webseiten solche Anforderungen, insbesondere wenn Vue zum Schreiben von SPA verwendet wird.

Die Navigation im Projekt verwendet fast immer router.push({name: 'xxx', params: {xxx:123...}}) hier entlang. Ein direktes Problem, das durch diesen Ansatz verursacht wird, ist: Wenn auf die Zurück-Schaltfläche geklickt wird (Aufruf router.go(-1)) wird nur die URL im Verlauf gespeichert und das params-Objekt geht verloren, was zu Ausnahmen beim Rendern von Seiten führt, die auf params basieren.

2 Lösung

Tatsächlich ist die Idee sehr einfach. Da die Parameter während der Rückoperation verloren gehen, werden wir natürlich darüber nachdenken, wie wir die Parameter speichern können! Das ist richtig, es ist so unhöflich. Da du es wegwerfen willst, behalte ich es für dich!

So sparen Sie: Tatsächlich müssen Sie nicht darüber nachdenken. Dies ist ein komponentenübergreifendes Kommunikationsproblem. Daher ist die Verwendung von Vuex zum Speichern am sinnvollsten!

Wann speichern: Die erste Reaktion besteht darin, router.push({name: 'xxx', params: {xxx:123...}}), wenn Sie dann zu dieser URL zurücknavigieren und keine Parameter vorhanden sind, versuchen Sie, sie aus vuex zu speichern Holen Sie es im Geschäft ab. Es scheint richtig, aber es ist ein bisschen mühsam! ! Keine Panik, wir haben einen Navigations-Hook-Router.vorJedes((zu, von, nächstes) => { // ... }) Ah!

Wie der Name schon sagt, wird der von vue-router bereitgestellte Navigations-Hook hauptsächlich dazu verwendet, die Navigation abzufangen und den Sprung abzuschließen oder abzubrechen.

An diesem Punkt sollten Sie meine Lösung vollständig verstanden haben, damit ich im Folgenden nicht zu viel Unsinn erzähle. Hier ist der 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
})
//...

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall gelesen haben In diesem Artikel und mehr. Wie aufregend, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS-Betriebsbrowser öffnen und schließen

So kapseln Sie Canvas mit js in ein Plug-in

js verwendet reguläre Ausdrücke zur Überprüfung der Passwortstärke

Das obige ist der detaillierte Inhalt vonVue Router+Vuex implementiert die Speicherung des Back-State. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!