vuex を localstorage と組み合わせて使用​​し、ストレージの変更を動的に監視する方法

今回は vuex と localstorage を組み合わせてストレージの変更を動的に監視する方法を説明します。 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 です。

vuex リファレンスドキュメントについて: http://vuex.vuejs.org/zh-cn/index.html

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

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.テンプレート

<img  src="/static/imghwm/default1.png" data-src="imgInfo?imgInfo:info.avatar" class="lazy" alt="vuex を localstorage と組み合わせて使用​​し、ストレージの変更を動的に監視する方法" > 
//三元不等式，如果state发生变化有值就赋值给img标签，如果没有即刚进页面就赋值给create生命周期函数中从接口读出来的数据

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSで雪の結晶が降るアニメーションを実装する手順の詳細な説明

Vue+canvasを使用してモバイル手書きパッド機能を実装する方法

以上がvuex を localstorage と組み合わせて使用​​し、ストレージの変更を動的に監視する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。