Maison > Article > interface Web > 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
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!