Comment utiliser vuex de manière avancée

Cette fois, je vais vous montrer comment utiliser vuex de manière avancée et quelles sont les précautions pour une utilisation avancée de vuex. Ce qui suit est un cas pratique, jetons un coup d'œil.

1. Getter

Rappelons d'abord le code de l'article précédent

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

Supposons que la logique ait changé maintenant, et nous finalement attendez-vous à obtenir Les données (getName) sont obtenues grâce à des calculs complexes basés sur this.$store.state.name. Ce getName est utilisé à de nombreux endroits, nous devons donc en copier plusieurs copies

donne vuex. Nous fournissons un getter, veuillez consulter le code (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 -----------------以下5行为新增
 getters:{
  getReverseName: state => {
    return state.name.split('').reverse().join('')
  }
 },
 // 类似 vue 里的 mothods(同步方法)
 mutations: {
  updateName (state) {
   state.name = 'newName'
  }
 }
})

Ensuite, nous pouvons utiliser le fichier location/src/main.js comme ceci

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

En fait, getter joue non seulement un rôle d'encapsulation, mais met également en cache les données de résultat, tout comme l'attribut calculé de Vue. Ce n'est que lorsque les dépendances changent qu'il doit être recalculé

2. actions et $dispatch

Si vous faites attention, vous avez dû remarquer que l'en-tête mutations dans mon code précédent a des commentaires similaires aux méthodes (méthodes synchrones) dans vue

Pourquoi devrions-nous noter qu'il s'agit d'une méthode synchronisée après les méthodes ? La mutation ne peut être qu'une fonction synchronisée, ne peut être qu'une fonction synchronisée, ne peut être qu'une fonction synchronisée !! >

Imaginez maintenant : nous débogueons une application et observons les journaux de mutation dans devtool. Chaque fois qu'une mutation est enregistrée, les outils de développement doivent capturer des instantanés de l'état précédent et de l'état suivant. Cependant, dans l'exemple ci-dessus, le rappel dans la fonction asynchrone de la mutation rend cela impossible : car lorsque la mutation se déclenche, la fonction de rappel n'a pas encore été appelée, devtools ne sait pas quand la fonction de rappel est réellement appelée - Essentiellement, tous les changements d'état effectués dans la fonction de rappel sont introuvables.

Et si on veut déclencher une opération asynchrone ? La réponse est : action + $dispatch, on continue de modifier le code ci-dessous store/index.js File location/src/store/index. js

Ensuite, nous pouvons l'utiliser dans notre page vue comme ceci

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)
  }
 }
})

3. Module

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

Modularisation

Lorsque le projet devient de plus en plus grand, un seul fichier de magasin n'est certainement pas ce que nous voulons, donc la modularisation est introduite. Supposons qu'il y ait ces 2 fichiers dans le répertoire src/store

moduleA.js

moduleB.js

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

Ensuite, nous pouvons changer index.js comme ceci

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

Je crois que vous maîtrisez la méthode après avoir lu le cas dans ce article, et plus Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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

Comment utiliser v-model et promettre d'implémenter le composant pop-up vue

Comment pour utiliser JS, il implémente le téléchargement de fichiers par glisser-déposer

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!