Maison  >  Article  >  interface Web  >  Analyse des étapes d'utilisation de vuex

Analyse des étapes d'utilisation de vuex

php中世界最好的语言
php中世界最好的语言original
2018-05-03 15:42:341785parcourir

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

exporté par vuex >

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn