URLを作成し、そのパラメータからVue.js Vuex状態を設定する

Question

私は、ユーザーがいくつかの値を入力してレシピのようなものを作成できるようにするVue.jsでSPAを構築しました。これらの値はすべてVuex状態で保存されます。ユーザーが入力した状態値を使用してURLを作成して、別のユーザーがすでに入力した値でアプリケーションを読み込むことができるようにしたいと考えています。基本的には、ユーザーが自分のアプリで作成したレシピをURLを共有することで共有できるようにしたいと考えています。

私は、作成したURLをユーザーのクリップボードにコピーしてソーシャルメディアなどに投稿できる「共有」ボタンを想像しています。誰かがリンクを訪問すると、彼らは私のアプリに行き、vuexの状態の値は自動的にURLにあるパラメータ値に更新されます。

この機能を実現する最善の方法は何ですか？これはvue-routerで可能ですか？

Answer 1

vue-routerによって提供される$route.queryプロパティを使用します。

http://example.com/#/?amount=10のようなURLでパラメータを渡し、this.$route.query.amountでアクセスしてください。

vuexストアをメインコンポーネントのmounted()メソッドに更新します。

Official Documentation for the Route object

Answer 2

私があなたを正しく理解しているなら、vue-routerはそれを正確に行うべきです。

ユーザーIDを送信するドキュメントを見てください。あなたは好きなだけ多くのパラメータを渡すことができます。

https://router.vuejs.org/en/essentials/dynamic-matching.html

注：ルータを使用してアプリケーション・パスの再構築を検討することができます。