Vue Router+Vuex はバックステート保存を実装します

今回は、後方状態保存を実現するための Vue Router+Vuex について説明します。以下は、後方状態保存を実現するために Vue Router+Vuex が実装する 注意事項 について説明します。

申し訳ありませんが、タイトルが少し長いです。今回はランニングアカウントについて実際に比較的詳細なものなので、以下で詳細を見てみましょう:

1つの要求

最近、electron-vue を使用してクロスプラットフォームのデスクトップ ソフトウェアを開発しましたが、数ページを手書きし始めたところ、問題が発生しました。デスクトップ ソフトウェアには通常、

ナビゲーションの要件があります

。 戻るボタンをクリックすると

前のページに戻り、前のページの内容が表示されます。実際、アプリだけでなく、通常の Web ページにも、特に vue を使用して SPA を作成する場合には、このような要件があります。

プロジェクト内のナビゲーションでは、ほとんどの場合、router.push({name: 'xxx', params: {xxx:123...}}) こちらです。このアプローチによって引き起こされる直接的な問題は、「戻る」ボタンがクリックされたとき (呼び出し router.go(-1)) を実行すると、URL のみが履歴に保存され、params

オブジェクト が失われるため、params に依存するページ レンダリング例外が発生します。

2 解決策

実際、アイデアは非常に単純です。バック操作中にパラメータが失われるため、パラメータを保存する方法を自然に考えることになります。そうだよ、捨てるのは失礼だから、預かってあげるよ！

保存方法: 実際、これはコンポーネント間の通信の問題であるため、Vuex を使用して保存するのが最も常識的です。

保存する場合: 最初の反応は、router.push({name: 'xxx', params: {xxx:123...}})、この URL に戻る場合、パラメータがない場合は、vuex から保存してみてください。 店頭でお受け取りください。正しいようですが、ちょっと面倒です！ ！パニックにならないでください。ナビゲーション フック ルーターがあります。

前それぞれ((to、from、next) => { // ... }) ああ！

その名前が示すように、vue-router によって提供されるナビゲーション フックは、主にナビゲーションをインターセプトし、ジャンプまたはキャンセルを完了させるために使用されます。

この時点で、あなたは私の解決策を完全に理解しているはずなので、以下でナンセンスな話はやめて、コードに進みましょう:

/*
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
})
//...

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、こちらをご覧ください。 PHP 中国語 Web サイトの記事にある他の関連トピックにも注目してください。

推奨読書:

JS操作ブラウザの開閉

jsがCanvasをプラグインにカプセル化する方法

jsはパスワード強度の検証に正規表現を使用します

以上がVue Router+Vuex はバックステート保存を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。