vuexの高度な使い方

php中世界最好的语言
リリース: 2018-05-28 15:07:01
オリジナル
1376 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!