Parlons de ma compréhension de vuex

vuex existe pour résoudre le problème de communication entre les composants de vue et les composants. vuex est un peu compliqué à comprendre, mais une fois qu'on l'a compris, il est facile à utiliser :

Installation :

npm install --save vuex

Introduction

import Vuex

Introduction à plusieurs paramètres de vuex

Données d'initialisation du State Store

Getters pour State Traitement secondaire des données (le filtrage des données est similaire à un filtre). Par exemple, State renvoie un objet si nous voulons obtenir la valeur d'une clé dans l'objet, utilisez cette méthode

Toutes les mutations. les méthodes de calcul des données sont écrites en Inside (similaires à celles calculées), utilisez this.$store.commit('mutationName') lors du déclenchement dans la page pour déclencher la méthode Mutations pour modifier la valeur de l'état

Actions en traitez les méthodes déjà écrites dans Mutations. La méthode de déclenchement direct est la suivante .$store.dispatch(actionName)

Ne nous précipitons pas pour en savoir plus. Imprimons Vuex

console.log(Vuex) //Vuex为一个对象里面包含Vuex ={
    Store:function Store(){},    
    mapActions:function(){},    // 对应Actions的结果集mapGetters:function(){},    //对应Getters的结果集mapMutations:function(){},  //对应Mutations的结果集mapState:function(){},      //对应State的结果集install:function install(){}, //暂时不做讲解 installed:true //暂时不做讲解}//如果我们只需要里面的State时我们可以这样写import { mapState } from 'vuex';
import { mapGetters, mapMutations } from 'vuex'; //如果需要引用多个时用这种方式处理

Lisons le contenu ci-dessus encore et encore. Maintenant que nous sommes joyeux, donnons des exemples et décrivons-les dans la langue officielle

L'État

L'État est responsable du stockage des données d'État de. l'ensemble de l'application. Généralement, il doit injecter l'objet store dans le nœud lors de son utilisation. Plus tard, vous pouvez utiliser this.$store.state pour obtenir directement l'état

//store为实例化生成的import store from './store' new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

Ce magasin peut être compris comme un conteneur, incluant l'état dans l'application. Le processus d'instanciation et de génération d'un magasin est :

//./store文件const store = new Vuex.Store({
  state: {   //放置state的值
    count: 0,
    strLength:"abcd234"
  },
  getters: {   //放置getters方法
      strLength: state => state.aString.length
  },
  mutations: {   //放置mutations方法
       mutationName(state) {          //在这里改变state中的数据  state.count = 100;
       }
  },  // 异步的数据操作  actions: {      //放置actions方法
       actionName({ commit }) {          //dosomething commit('mutationName')
      },
      getSong ({commit}, id) {
          api.getMusicUrlResource(id).then(res => {
            let url = res.data.data[0].url;
        
          })
          .catch((error) => {  // 错误处理              console.log(error);
          });
      }
  }
});
export default store;

Lors d'une utilisation ultérieure dans les composants, si vous souhaitez obtenir l'état correspondant, vous pouvez directement utiliser this.$store.state Get, bien sûr, vous pouvez également utiliser la fonction auxiliaire mapState fournie par vuex pour mapper l'état aux propriétés calculées, telles que

import {mapState} from 'vuex'export default {  //组件中
  computed: mapState({
    count: state => state.count
  })
}

Getters

Certains états ont besoin à faire deux fois Une fois traité, vous pouvez utiliser des getters. Accédez à l'état dérivé via this.$store.getters.valueName. Ou utilisez directement la fonction auxiliaire mapGetters pour la mapper aux propriétés calculées locales.

Comment l'utiliser dans les composants

import {mapGetters} from 'vuex'export default {  
computed: mapGetters(['strLength'])
}

Mutations

Mutations signifie "changement" en chinois Vous pouvez l'utiliser pour changer l'état. .L'essence est Une fonction utilisée pour traiter les données, qui reçoit l'état unique de la valeur du paramètre. store.commit(mutationName) est une méthode utilisée pour déclencher une mutation. Ce qu'il faut retenir, c'est que la mutation définie doit être une fonction synchrone, sinon il pourrait y avoir des problèmes avec les données dans l'outil de développement, rendant les changements d'état difficiles à suivre.

Déclencheur dans le composant :

export default {
  methods: {
    handleClick() {      this.$store.commit('mutationName')
    }
  }
}

Ou utilisez la fonction auxiliaire mapMutations pour mapper directement la fonction déclencheur aux méthodes, afin que vous puissiez directement lier l'événement de l'élément utilisé. Par exemple :

import {mapMutations} from 'vuex'export default {
  methods: mapMutations(['mutationName'
  ])
}

Actions

Les actions peuvent également être utilisées pour changer l'état, mais elles sont mises en œuvre en déclenchant des mutations. L'important est que cela puisse. inclure des opérations asynchrones. Sa fonction auxiliaire est mapActions, qui est similaire à mapMutations et est également liée aux méthodes du composant. Si vous choisissez de le déclencher directement, utilisez la méthode this.$store.dispatch(actionName).

Utiliser des

import {mapActions} from 'vuex'//我是一个组件export default {
  methods: mapActions(['actionName',
  ])
}

Plugins

dans le composant Le plug-in est une fonction hook, qui peut être introduite lors de l'initialisation du store. . Le plus couramment utilisé est le plug-in de journalisation intégré, utilisé pour le débogage.

//写在./store文件中import createLogger from 'vuex/dist/logger'const store = Vuex.Store({
  ...
  plugins: [createLogger()]
})

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!