Vuex で値の変更が観察されない場合の回避策は何ですか?

以下では、Vuex で値の変化を観察できないことに基づいた解決策を共有します。これは優れた参考値であり、皆さんのお役に立てれば幸いです。

メインルーティングビューをまたぐ場合、Vuexのステータス値は常にメモリに保存されているため、コンポーネントビューをリロードするとコンポーネントがステータス値の変化を検出できず、業務エラーが発生する場合があります。論理。

一般的なヘッダー コンポーネントにはグローバル タスク ステータス値があり、他のコンポーネントはこのタスク値に基づいて更新する必要があると仮定します。より可能性の高い状況は、タスク ステータス値が非同期で読み込まれるため、ビジネス ロジックを次のように記述する必要があります。これ:

computed : {
 task () {
  return this.$store.state.task
 } 
},
watch : {
 task : {
   deep: true,
   handler (val) {
    // 由于是异步载入，所以只能在状态值的变化时执行渲染操作
    // 绝不可在mounted中执行render方法
    this.render(val)
   }
 } 
}

ただし、上記の理由により、ビューが初めてロードされるときは、Vuex 状態値がメモリに保存されていないため、レンダリングは正常に行われます。ビューの切り替えが発生した後、タスクのステータス値は再ロードされますが、タスクは変更されていないため、render メソッドは呼び出されず、コンポーネントはレンダリング プロセスを完了できません。

タスクの値を強制的に変更するには、タイムスタンプの粒度がまだ粗すぎると感じる場合は、次のように乱数を組み合わせて使用​​する方法があります。 :

watch: {
 taskId : {
   handler (val) {
    // 从v-model获取到的新值
    let taskId = this.taskId
    // 提交新值变化
    this.$store.commit(TASK_ID, 
    {
     id : taskId,
     // 添加时间戳
     time : Date.now().valueOf(),
     // 添加随机数
     random : Math.random()
    })
   }
 }
}

上記の処理後、taskIdの割り当てが発生している限り、Vuexの状態変化がトリガーされるため、コンポーネントがロードされるかtaskIdの値が変化するたびにrenderメソッドが実行されます。

上記は私があなたのためにまとめたものです。

関連記事:

jsの document.write と document.writeln の違い

Javascript のプロトタイプと __proto__ の関係の詳細な説明

Node.JS のループで空ではないフォルダーとサブディレクトリ すべてのファイル

以上がVuex で値の変更が観察されない場合の回避策は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。