Vuex はローカルストレージを組み合わせてストレージの変更を動的に監視します

この記事では、ストレージの変更を動的に監視する vuex と localstorage を組み合わせた詳細な説明を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

要件: 異なるコンポーネントが同じデータを共有する 1 つのコンポーネントがデータを変更すると、他のコンポーネントもその変更に応答できます。

分析: vue はローカルストレージの変更を監視できません。 Localstorage は主に異なるページ間で値を転送するために使用されますが、vue はコンポーネント間で値を転送するのに適しています。同じデータを共有し、情報を保存したい、またはページが更新されたときにデータが失われないようにしたいコンポーネントの場合 (vuex によって保存された値はページが更新されると失われ、localstorage はローカル ブラウザに保存されます)、次のことができます。 vuex+localstorage メソッドを使用します。

vuex と storage の違いについて

1. 最も重要な違い: vuex はメモリに保存されますが、localstorage はファイルの形式でローカルに保存されます

2. vuex は値の転送に使用されます。 Localstorage は主に、異なるページ間で値を転送するために使用されます。

3. 永続性: vuex に保存されている値はページが更新されると失われますが、localstorage は失われません。

注: 多くの学生は vuex の代わりに localstorage を使用できると考えていますが、データが変更されていない場合は確かに可能ですが、2 つのコンポーネントがデータ ソース (オブジェクトまたは配列) を共有している場合、コンポーネントの 1 つがデータ ソースを変更すると、それは問題になります。コンポーネントが変更に応答するとき、localstorage はそれを実行できないことが期待されています。その理由は違い 1 です。

実装プロセス: 例と​​して、ユーザーのアバター情報を表示し、パブリックコンポーネントのヘッダーコンポーネント内の個人情報を変更するホームページを考えます。ユーザーが個人情報を変更すると、アバター情報がリアルタイムでホームページ上の画像に変更されます。ユーザーが変更を完了するたびに保存および更新されるわけではありません。ページを更新するか、他のページから戻ることによってのみ、変更内容、つまり新しく設定されたアバター情報を確認でき、コア コードのみが表示されます。

1. まず状態に変数を定義します。 State はアプリケーション全体の状態データを保存する役割を果たします。後で this.$store.state を使用して状態を直接取​​得できます。 vuex が提供する補助関数 mapState を使用して、状態を計算されたプロパティにマップすることもできます。

const state = {
 imgInfo:null //首页头像信息

}

2.mutations はローカルストレージ情報を保存します。突然変異によって状態が変更される可能性があります。これは基本的に、一意のパラメーター値の状態を受け取る、データの処理に使用される関数です。定義された突然変異は同期関数である必要があります。 this.$store.commit(mutationName) は、ミューテーションをトリガーするために使用されるメソッドです。または、補助関数 mapMutations を使用してトリガー関数をメソッドに直接マップし、要素のイベント バインディングで直接使用できるようにします。

export const SETIMGINFO = 'SETIMGINFO'
[SETIMGINFO] (state,info) {
 state.imgInfo=info
 localStorage.setItem('imgInfo',info)
 }

3. getter でローカルストレージ情報を取得します。一部の状態では二次処理が必要なため、ゲッターを使用できます。 this.$store.getters.valueName を通じて派生状態にアクセスします。または、補助関数 mapGetters を直接使用して、ローカルの計算されたプロパティにマップします。

getImgInfo(state){
  if(localStorage.getItem('imgInfo')){
  state.imgInfo=localStorage.getItem('imgInfo')
  }
  return state.imgInfo
 }

4. ストレージを操作する必要があるページでmapMutations関数を参照します

import {mapMutations} from 'vuex' //引入mapMutations
 ...mapMutations([      
  'SETIMGINFO'
  ]),
this.SETIMGINFO(this.imgInfo) 
 //在需要的地方引用 mutations里面定义的方法

5. ストレージ情報を取得する必要があるページでmapGetters補助関数を参照します

import {mapGetters} from 'vuex'
computed:{
  ...mapGetters([   
  'getImgInfo'
  ])
 },
watch:{ //动态监听state的变化，实时改变页面的数据
  getImgInfo: function(li) { //li就是改变后的state里面的imgInfo
  let vm = this;
   this.imgInfo=li //data声明一个变量，在html引用。如果storage的值发生变化就实时刷新变量的值。
  }
 },

6。

以上がVuex はローカルストレージを組み合わせてストレージの変更を動的に監視しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。