vuexの高度な使い方

今回は、vuex の高度な使い方と、vuex を高度な方法で使用する際の注意事項を紹介します。以下は実践的なケースです。一緒に見てみましょう。

1. Getter

まず前の記事のコードを思い出してください

computed:{
  getName(){
   return this.$store.state.name
  }
}

ロジックが変更され、最終的に取得する予定のデータ (getName) は this.$store.state に基づいていると仮定します。 name これは複雑な計算によって取得されます。この getName は多くの場所で使用されるため、何度かコピーする必要があります。

vuex がゲッターを提供します。コードを参照してください (ファイルの場所/src/store/index)。 .js)

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 // 类似 vue 的 data
 state: {
  name: 'oldName'
 },
 // 类似 vue 的 computed -----------------以下5行为新增
 getters:{
  getReverseName: state => {
    return state.name.split('').reverse().join('')
  }
 },
 // 类似 vue 里的 mothods(同步方法)
 mutations: {
  updateName (state) {
   state.name = 'newName'
  }
 }
})

その後、このようにファイル location/src/main.js を使用できます

computed:{
  getName(){
   return this.$store.getters.getReverseName
  }
}

実際、ゲッターはカプセル化の役割を果たすだけでなく、vue の計算された属性のように結果データもキャッシュします。依存関係が変更された場合にのみ、再計算する必要があります。

2. action と $dispatch

注意していれば、前のコードの突然変異ヘッダーのコメントがvue のメソッド (同期メソッド)

メソッドの後にある同期メソッドについてはどうですか? ミューテーションは同期関数のみ、同期関数のみ、の説明を参照してください。 vuex:

次に、アプリをデバッグし、 devtool の突然変異ログインを観察していると想像してください。突然変異が記録されるたびに、devtools は前の状態と次の状態のスナップショットをキャプチャする必要があります。ただし、上記の例では、ミューテーション内の非同期関数のコールバックによってこれが不可能になります。ミューテーションが起動するとき、コールバック関数はまだ呼び出されておらず、devtools はコールバック関数が実際にいつ呼び出されるのかを知りません。コールバック関数内で行われた状態の変更は追跡できません。
では、非同期操作をトリガーしたい場合はどうすればよいでしょうか? 答えは次のとおりです: action + $dispatch、store/index.js の下のコードを引き続き変更します

File location/src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 // 类似 vue 的 data
 state: {
  name: 'oldName'
 },
 // 类似 vue 的 computed
 getters:{
  getReverseName: state => {
    return state.name.split('').reverse().join('')
  }
 },
 // 类似 vue 里的 mothods(同步方法)
 mutations: {
  updateName (state) {
   state.name = 'newName'
  }
 },
 // 类似 vue 里的 mothods(异步方法) -------- 以下7行为新增
 actions: {
  updateNameAsync ({ commit }) {
   setTimeout(() => {
    commit('updateName')
   }, 1000)
  }
 }
})

vue ページでこれを使用できます

methods: {
  rename () {
    this.$store.dispatch('updateNameAsync')
  }
}

3. モジュール モジュール化

プロジェクトがますます大きくなると、単一のストア ファイルは絶対に必要なものではなくなるため、モジュール性が存在します。 /store ディレクトリ内の 2 つのファイル

moduleA.js

export default {
  state: { ... },
  getters: { ... },
  mutations: { ... },
  actions: { ... }
}

moduleB.js

export default {
  state: { ... },
  getters: { ... },
  mutations: { ... },
  actions: { ... }
}

それから、index.js をこれに変更できます

import moduleA from './moduleA'
import moduleB from './moduleB'
export default new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
})

この記事のケースを読んだ後、あなたは方法をマスターしたと思います。 php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

v-model を使用して vue ポップアップ コンポーネントを実装する方法

JS を使用してファイルのドラッグ アンド ドロップ アップロードを実装する方法

以上がvuexの高度な使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。