Detaillierte Erläuterung der modularen (Modul-)Beispiele von Vuex

Dieser Artikel stellt Ihnen hauptsächlich die Vuex-Modularität vor. Der Herausgeber findet ihn ziemlich gut. Jetzt teile ich ihn mit Ihnen und hoffe, dass er Ihnen helfen kann.

1. Warum Modularisierung erforderlich ist

Die zuvor erwähnten Beispiele werden alle in einem Zustandsbaum ausgeführt. Wenn ein Projekt relativ groß ist, werden alle Zustände zusammengefasst. Holen Sie sich ein relativ großes Objekt, das aufbläht und schwer zu pflegen ist. Um dieses Problem zu lösen, können wir mit Vuex den Speicher in Module unterteilen. Jedes Modul hat seinen eigenen Status, seine eigene Mutation, seine eigene Aktion und seinen eigenen Getter. Schauen wir uns unten ein typisches Modularisierungsbeispiel an >

2. Der lokale Status des Moduls

const moduleA = {
 state: {....},
 mutations: {....},
 actions: {....},
 getters: {....}
}

const moduleB = {
 state: {....},
 mutations: {....},
 actions: {....},
 getters: {....}
}

const store = new Vuex.Store({
 modules: {
 a: moduleA,
 b: moduleB
 }
})

store.state.a // moduleA的状态
store.state.b // moduleB的状态

Die Mutation und der Getter innerhalb des Moduls. Der erste empfangene Parameter (Status) ist das lokale Statusobjekt des Moduls, rootState

3. Namespace (Lesen Sie es unbedingt hier, sonst werden Sie manchmal ausgetrickst)

const moduleA = {
 state: { count: 0},
 mutations: {
 increment (state) {
  // state是模块的局部状态，也就是上面的state
  state.count++
 }
 },
 getters: {
 doubleCount (state, getters, rootState) {
  // 参数 state为当前局部状态，rootState为根节点状态
  return state.count * 2
 }
 },
 actions: {
 incremtnIfOddRootSum ( { state, commit, rootState } ) {
  // 参数 state为当前局部状态，rootState为根节点状态
  if ((state.cont + rootState.count) % 2 === 1) {
  commit('increment')
  }
 }
 }
}

In allen oben genannten Beispielen werden die Aktionen, Mutationen und Getter innerhalb des Moduls im globalen Namespace If registriert Sie befinden sich in ModulA und ModulB und deklarieren Aktionen, Mutationen oder Getter (some genannt) mit demselben Namen. Wenn Sie store.commit('some') verwenden, antworten die Module A und B gleichzeitig. Wenn Sie also möchten, dass Ihr Modul eigenständiger und wiederverwendbar ist, können Sie namespaced: true hinzufügen, um es zu einem Namespace-Modul zu machen. Wenn ein Modul registriert ist, rufen alle seine Getter, Aktionen und Mutationen automatisch den gesamten Namen entsprechend dem vom Modul registrierten Pfad auf. Beispiel:

Getter und Aktionen mit aktiviertem Namespace werden lokalisiert empfangen Getter, Dispatch und Commit. Sie müssen im selben Modul kein Space-Namenspräfix hinzufügen, wenn Sie Modulinhalte verwenden, und Sie müssen den Code im Modul nach der Änderung des Namespace-Attributs nicht ändern.

const store = new Vuex.Store({
 modules: {
 account: {
  namespaced: true,
  state: {...}, // 模块内的状态已经是嵌套的，namespaced不会有影响
  getters: {  // 每一条注释为调用方法
  isAdmin () { ... } // getters['account/isAdmin']
  },
  actions: {
  login () {...} // dispatch('account/login')
  },
  mutations: {
  login () {...} // commit('account/login')
  },
  modules: {  // 继承父模块的命名空间
  myPage : {
   state: {...},
   getters: {
   profile () {...}  // getters['account/profile']
   }
  },
  posts: { // 进一步嵌套命名空间
   namespaced: true,
   getters: {
   popular () {...} // getters['account/posts/popular']
   }
  }
  }
 }
 }
})

4. Greifen Sie auf globale Inhalte (Global Assets) innerhalb des Namespace-Moduls zu.

Wenn Sie globalen Status und Getter verwenden möchten, werden roorState und rootGetter als dritter und vierter Parameter an den Getter übergeben . Die Aktion wird auch über die Attribute des Kontextobjekts übergeben. Wenn Sie die Aktion verteilen oder die Mutation im globalen Namespace übermitteln müssen, übergeben Sie einfach { root: true } als dritten Parameter zum Versenden oder Festschreiben.

5. Bindungsfunktionen mit Namespace

modules: {
 foo: {
 namespaced: true,
 getters: {
  // 在这个被命名的模块里，getters被局部化了
  // 你可以使用getter的第四个参数来调用 'rootGetters'
  someGetter (state, getters, rootSate, rootGetters) {
  getters.someOtherGetter // -> 局部的getter， ‘foo/someOtherGetter'
  rootGetters.someOtherGetter // -> 全局getter, 'someOtherGetter'
  }
 },
 actions: {
  // 在这个模块里，dispatch和commit也被局部化了
  // 他们可以接受root属性以访问跟dispatch和commit
  smoeActino ({dispatch, commit, getters, rootGetters }) {
  getters.someGetter // 'foo/someGetter'
  rootGetters.someGetter // 'someGetter'
  dispatch('someOtherAction')  // 'foo/someOtherAction'
  dispatch('someOtherAction', null, {root: true}) // => ‘someOtherAction'
  commit('someMutation') // 'foo/someMutation'
  commit('someMutation', null, { root: true }) // someMutation
  }
 }
 }
}

Wie bereits erwähnt, muss der Namespace nach dem Einbringen beim Aufruf geschrieben werden, was jedoch umständlicher ist, insbesondere wenn es um Multi geht Verschachtelung auf -Ebene (verschachteln Sie während der Entwicklung natürlich nicht zu viel, sonst wird Ihnen schwindelig...)

Werfen wir einen Blick auf die allgemeine Schreibmethode

In dieser Situation können Sie den Namespace des Moduls als erstes Argument an die obige Funktion übergeben, sodass alle Bindungen das Modul automatisch als Kontext verwenden. Vereinfachtes Schreiben ist

computed: {
 ...mapState({
 a: state => state.some.nested.module.a,
 b: state => state.some.nested.module.b
 }),
 methods: {
 ...mapActions([
  'some/nested/module/foo',
  'some/nested/module/bar'
 ])
 }
}

6. Wiederverwendung von Modulen

computed: {
 ...mapStates('some/nested/module', {
 a: state => state.a,
 b: state => state.b
 })
},
methods: {
 ...mapActions('some/nested/module',[
 'foo',
 'bar'
 ])
}

Manchmal können wir mehrere Instanzen eines Moduls erstellen, zum Beispiel:

Mehrere Stores erstellen , sie teilen sich ein Modul
Registrieren Sie dasselbe Modul mehrmals in einem Geschäft

• 
  

Wenn wir ein reines Objekt zum Deklarieren verwenden Wenn Sie den Status des Moduls ändern, wird dieses Statusobjekt über Referenzen gemeinsam genutzt, was dazu führt, dass sich die Daten gegenseitig verunreinigen.

Tatsächlich haben die Daten in der Vue-Komponente das gleiche Problem, daher ist die Lösung dieselbe. Verwenden Sie eine Funktion, um den Modulstatus zu deklarieren (unterstützt von 2.3.0+)

7 . Zusammenfassung

const MyModule = {
 state () {
 return {
  foo: 'far'
 }
 }
}

Der Inhalt der Modularität ist hier abgeschlossen. Diesmal erläutern wir hauptsächlich die Gründe für die Entstehung von Modulen, deren Verwendung, globale und lokale Namensräume für Modulnamen, den lokalen Zugriff auf globale Inhalte und die Zuordnung Funktionen mit Namensräumen. Wiederverwendung gebundener Funktionen und Module.

Zitat

https://vuex.vuejs.org Offizielle Vuex-Dokumentation

Verwandte Empfehlungen:

vuex2.0 Detaillierte Erklärung der Modulinstanz

Detaillierte Erklärung von Vue + Vuex Detaillierte Erklärung der Verwendung der vm.$nextTick-Instanz

Lernen Sie einfaches Vuex und Modularisierung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der modularen (Modul-)Beispiele von Vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!