Maison interface Web js tutoriel La paire d'objets d'exportation vuex ajoute de la valeur à l'état

La paire d'objets d'exportation vuex ajoute de la valeur à l'état

Jun 14, 2018 am 11:48 AM
vuex Simple à utiliser

Cette fois, je vais vous apporter l'objet d'exportation vuex pour ajouter de la valeur à l'état. Quelles sont les précautions à prendre pour que l'objet d'exportation vuex ajoute de la valeur à l'état. Ce qui suit est un cas pratique, jetons un coup d'œil.

vuex est une architecture de gestion d'état centralisée spécialement conçue pour vue.js. État? Je le comprends comme la partie où les attributs des données doivent être partagés avec d'autres composants de vue, appelés é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)
Copier après la connexion

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

this.$store.state.useredit
Copier après la connexion

2 Ajouter la valeur de l'objet exporté par vuex à l'état

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)
Copier après la connexion

dans main.js

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

Je crois que vous maîtrisez la méthode après en lisant le cas dans cet article, plus Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment interagir avec les composants angulaires

Utilisez vue-route+beforeEach pour créer des gardes de navigation

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 de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Installez cmake en utilisant Ubuntu et son utilisation simple Installez cmake en utilisant Ubuntu et son utilisation simple Jan 01, 2024 am 08:57 AM

Préface : Récemment, j'ai soudain eu envie de transférer l'environnement de développement vers Linux. En même temps, je me préparais aussi à lire quelques codes open source sur github. J'ai découvert que les projets open source sont désormais généralement gérés avec cmake. Je l'ai donc simplement bricolé sur ma propre machine virtuelle. Au début, je ne savais pas ce qu'était cmake, mais plus tard, j'ai à peu près compris son rôle grâce à quelques manipulations. Ce qu'il fait, c'est en fait indiquer au compilateur comment compiler et lier le code source. Vous voudrez peut-être demander s’il n’y a pas de makefile, pourquoi en avez-vous besoin ? Cela implique des problèmes multiplateformes. Sous la plate-forme Windows, ceux-ci sont gérés via des fichiers de projet. Si cmake n'est pas utilisé, nous devons alors écrire les fichiers de projet correspondants et créer pour les systèmes Windows et Linux.

Comment résoudre le problème « Erreur : [vuex] ne mute pas l'état du magasin vuex en dehors des gestionnaires de mutation lors de l'utilisation de vuex dans une application Vue ? Comment résoudre le problème « Erreur : [vuex] ne mute pas l'état du magasin vuex en dehors des gestionnaires de mutation lors de l'utilisation de vuex dans une application Vue ? Jun 24, 2023 pm 07:04 PM

Dans les applications Vue, l'utilisation de vuex est une méthode courante de gestion d'état. Cependant, lors de l'utilisation de vuex, nous pouvons parfois rencontrer un tel message d'erreur : "Erreur : [vuex]donotmutatevuexstorestateoutsidemutationhandlers." Que signifie ce message d'erreur ? Pourquoi ce message d'erreur apparaît-il ? Comment corriger cette erreur ? Cet article abordera ce problème en détail. Le message d'erreur contient

Meilleures pratiques d'utilisation de Vuex pour gérer l'état global dans Vue2.x Meilleures pratiques d'utilisation de Vuex pour gérer l'état global dans Vue2.x Jun 09, 2023 pm 04:07 PM

Vue2.x est actuellement l'un des frameworks frontaux les plus populaires, qui fournit Vuex comme solution pour gérer l'état global. L'utilisation de Vuex peut rendre la gestion des états plus claire et plus facile à maintenir. Les meilleures pratiques de Vuex seront présentées ci-dessous pour aider les développeurs à mieux utiliser Vuex et à améliorer la qualité du code. 1. Utilisez l'état d'organisation modulaire. Vuex utilise une seule arborescence d'état pour gérer tous les états de l'application, extrayant l'état des composants, rendant la gestion des états plus claire et plus facile à comprendre. Dans les applications avec beaucoup d'états, des modules doivent être utilisés

Comment résoudre le problème « Erreur : [vuex] type d'action inconnu : xxx » lors de l'utilisation de vuex dans une application Vue ? Comment résoudre le problème « Erreur : [vuex] type d'action inconnu : xxx » lors de l'utilisation de vuex dans une application Vue ? Jun 25, 2023 pm 12:09 PM

Dans les projets Vue.js, vuex est un outil de gestion d'état très utile. Il nous aide à partager l'état entre plusieurs composants et fournit un moyen fiable de gérer les changements d'état. Mais lorsque vous utilisez vuex, vous rencontrerez parfois l'erreur "Erreur : [vuex]unknownactiontype:xxx". Cet article expliquera la cause et la solution de cette erreur. 1. Cause de l'erreur Lors de l'utilisation de vuex, nous devons définir certaines actions et mu

Comment utiliser Vuex dans Vue3 Comment utiliser Vuex dans Vue3 May 14, 2023 pm 08:28 PM

Que fait Vuex ? Vue officielle : outil de gestion d'état Qu'est-ce que la gestion d'état ? L'état doit être partagé entre plusieurs composants, et il est réactif. Un seul changement change tout. Par exemple, certaines informations d'état utilisées à l'échelle mondiale : statut de connexion de l'utilisateur, nom d'utilisateur, informations de localisation géographique, articles dans le panier, etc. À l'heure actuelle, nous avons besoin d'un tel outil pour la gestion globale de l'état, et Vuex est un tel outil. Gestion de l'état d'une seule page Vue–>Actions–>La couche de vue d'état (vue) déclenche une action (action) pour changer d'état (état) et répond à la couche de vue (vue) vuex (Vue3.

En savoir plus sur les principes de mise en œuvre de vuex En savoir plus sur les principes de mise en œuvre de vuex Mar 20, 2023 pm 06:14 PM

Lorsqu'on vous pose une question lors d'un entretien sur le principe de mise en œuvre de vuex, que devez-vous répondre ? L'article suivant vous donnera une compréhension approfondie du principe d'implémentation de vuex. J'espère qu'il vous sera utile !

Comment résoudre le problème « TypeError : Impossible de lire la propriété 'xxx' de non définie » lors de l'utilisation de vuex dans l'application Vue ? Comment résoudre le problème « TypeError : Impossible de lire la propriété 'xxx' de non définie » lors de l'utilisation de vuex dans l'application Vue ? Aug 18, 2023 pm 09:24 PM

Utiliser Vuex dans les applications Vue est une opération très courante. Cependant, parfois lors de l'utilisation de Vuex, vous rencontrerez le message d'erreur « TypeError : Cannotreadproperty'xxx'ofundefined ». Ce message d'erreur signifie que la propriété non définie « xxx » ne peut pas être lue, ce qui entraîne une erreur de programme. La raison de ce problème est en fait très évidente. C'est parce que lors de l'appel d'un certain attribut de Vuex, cet attribut n'est pas correctement défini.

Comment utiliser vuex dans vue3+vite Comment utiliser vuex dans vue3+vite Jun 03, 2023 am 09:10 AM

Étapes spécifiques : 1. Installez vuex (vue3 recommandé 4.0+) pnpmivuex-S2, configurez la configuration globale de importstorefrom'@/store'//hx-app dans main.js constapp=createApp(App)app.use(store) 3 . Créez de nouveaux dossiers et fichiers associés. Ici, configurez plusieurs js dans différents modules vuex pour placer différentes pages et fichiers, puis utilisez un fichier principal getters.jsindex.js à la place. de

See all articles