Vueプロジェクト都市選択ページ-Vueはデータ共有を実現します(8-9)

Vueはデータ共有を実現します

データ共有には、vuexの状態管理モードを使用します。
https://vuex.vuejs.org/zh/は、このWebサイトにアクセスして詳細を確認できます。

実際、データ共有とは、index.jsファイルを作成し、データを定義し、他のホームページにこのデータを使用させることを意味します。データを変更する場合は、index.jsファイルのデータを変更すると、複数のデータが同時にバラエティ。

cnpm install vuex --save download

データを共有する方法。

  1. フォルダーストアを作成し、その中にindex.jsファイルを作成しました。city: 'Shanghai'
    ここに画像の説明を挿入
  2. stroe /index.jsをグローバルに導入
    ここに画像の説明を挿入
  3. 共有する必要のあるデータ。
    ここに画像の説明を挿入
  4. 別の都市をクリックした後のデータ変更を共有し、クリックイベントを作成して、このクリックの値をその都市に渡したいと思います。
    ここに画像の説明を挿入
  5. このメソッドを呼び出した後、共有を実現するために、共有値がstroe /index.jsの都市値に変更されます ここに画像の説明を挿入
  6. 内部でindex.jsを呼び出します。
    ここに画像の説明を挿入
  7. 最後に、自動的に特定のページに戻ります。このメソッドは、ホームページにジャンプするために使用されます。
    ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_45647118/article/details/114298082