VUE：、同じコンポーネントの異なるパラメータを使用してジャンプ動荷重画像及びデータを達成するために、永続的なデータのlocalStorageとvuexの使用

需要：イメージが正常にロードすることができ、依然として、異なるパラメータが同じコンポーネント、動的な負荷データや画像を再利用し、そして、ときにページが更新されます。

そして、バグの際に発生する問題：

　　1は、Paramsパラメータ渡しを使用した後、再びロードすることができないデータパラメータが失われ、再びページを更新します

　　2、スイッチは質量参加を行ってクエリにした後、画像は、APIフック機能割り当て後に作成されたURLクエリデータを呼び出すことですので、絵は、ロードできませんでしたページを更新し、割り当てページがレンダリングされた後、画像が得が正常にロードできませんでした

ソリューション：

　　データの使用に、現在のルートにジャンプのlocalStorageによって持続1、データは、本明細書vuexで操作することができるのlocalStorageを永続します

　　2、フロントページのレンダリングは、画像のURLを直接urlは場合は、画像をロードすることができませんでした原因割り当てられていない、ページのレンダリングが完了した表示されません、値のlocalStorageを読み込みます

コードを接続します。

　　あなたは/ viewmessageへ/ zyviewからジャンプする必要があります

　　/ ZyviewジャンプパートI：

      この。$のrouter.push（{
         // パス： `/ ViewMessage / $ {this.names [インデックス]`}、
        // 以下のメソッドルーティングはジャンプ、バグが再び発生しないクリック]タブのジャンプ 
        名を： "ViewMessage" 、
        クエリ：{ 
          名前：この .lists [インデックス] .m_name、    // これは、薬物の名前である 
          インデックス：インデックス、          // 薬用インデックス 
          MID：これは [インデックス]が.ID .lists、   // ハーブは、上記に述べたID 
          // this.lists [インデックス]：imgpathを.img_path 
        }
      }）;

　　トリガーメソッドを移動：

    gotodescribe（例えば、インデックス）{
      console.log（この.lists [インデックス] .ID）
      console.log（この.TEST）
      パスCONSTは = これは[インデックス] .img_path .lists
       // インデックスが対応するアクションを格納する変数とメソッドの意義のパスおよび名前であり、名前が通過しない値に対応しない
      、これを。$（「addimagepath」store.dispatch 、{パス、指数}）
      console.log（ "記憶内容" + この $ store.state.imgpath.imgpaths [。この$のroute.query.index。]）
       この$のrouter.push（{
         // パス： `/ ViewMessage / {$本。名前[インデックス]} `、
        // 表示されませんジャンプクリックタブの後、再びルート、バグをジャンプするには、次の方法を使用して 
        名前：「ViewMessage」を、
        クエリ：{ 
          名前：この .lists [インデックス] .m_name、    // これは、薬物の名前である 
          インデックス：インデックス、          // 薬用インデックス 
          MID：これは [インデックス]が.ID .lists、   // ハーブは、上記に述べたID 
          // this.lists [インデックス]：imgpathを.img_path 
        }
      }）;
    }、

　　これは、データの永続化のステップの前にジャンプです。

この。$のstore.dispatch（ 'addimagepath'、{パス、インデックス}）

以下では、この保存された画像パスモジュールを作成新しいファイルを作成し、vuexセクションです。

状態=定数{
     // 画像パス
    imgpaths：[]
     // imgpaths：localStorage.getItem（imgpaths [インデックス]）、 
    テスト： "b4b797913756456bb5ffd8d661ab79e5.jpg"
}
CONSTゲッター = {

}
// 状態の状態変化 
CONST変異=を{
    addimgpath（状態、{パス、インデックス}）{
        state.imgpaths [インデックス] = パス
        localStorage.setItem（インデックス、パス）//ここのlocalStorage永続データ、のlocalStorageのデータを直接バックのページを読んで
    }
}
CONSTアクション = {
    addimagepath（コンテキスト、{パス、インデックス}）{
        context.commit（ 'addimgpath' 、{パス、インデックス}）
    }
}


輸出のデフォルト{
    状態、
    ゲッター、
    変異、
    行動
}

　　 / Viewmessage一部：

        < EL-画像
           ：SRC = "` http://image.zysuyuan.cn:8031/$ {this.path} `" 
          スタイル= "幅：400ピクセル、高さ400ピクセル" 
          ：フィット= "フィット" 
          ALTを"=药材" 
        > </ EL-画像>

  データ（）{
     リターン{
      パス：localStorage.getItem（この$のroute.query.index。）、
      .........
    }
}

　　時計の和を作成しました：

  作成（）{
     この.fetchData（）。
  }、

  見る： {
    （からの）$ルート{
      この .path = localStorage.getItem（これます$ route.query.index）。
      この.fetchData（）;
    }
  }、