Analyse des étapes d'utilisation de vuex

Cette fois, je vais vous apporter une analyse des étapes pour utiliser vuex. Quelles sont les précautions lors de l'utilisation de vuex Voici un cas pratique, jetons un oeil.

Qu'est-ce que Vuex ?

vuex est une architecture de gestion d'état centralisée spécialement conçue pour vue.js. État? Je le comprends comme la partie de l'attribut dans les données qui doit être partagée avec d'autres composants de vue, appelée état. En termes simples, ce sont les attributs qui doivent être partagés dans les données.

1. Dans le composant vue

exécutez la méthode activécheckbox, true est le paramètre utilisé pour modifier la valeur dans l'état

  this.$store.dispatch("enabledcheckbox",true)

Obtenir la valeur de useredit à partir de l'état

this.$store.state.useredit

2 Ajouter la valeur à l'état dans l'objet

Ajouter des mutations pour changer la valeur de l'état

Ajouter des actions aux mutations

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
export default new vuex.Store({
    state: {
      useredit: false,
    },
    mutations: {
      ENABLEDCHECKBOX(state, value) {
        state.checkboxDisable = value
      },
    },
    actions: {
      enabledcheckbox({ commit }, value) {
        commit('ENABLEDCHECKBOX', value)
      },
    }
  })
  //console.log(vuex)

dans main.js

import store from './vuex'
new Vue({
 el: '#app',
 router,
 store,
 render:h=>h(App)
})

Résumé

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres. articles connexes sur le site php chinois !

Lecture recommandée :

Vue implémente le composant Echarts d'actualisation dynamique

Utilisez le sélecteur de sélection pour implémenter la liste déroulante dans le bootstrap

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!