Table des matières
composition vuex
Les modules vuex utilisent
pour créer des répertoires
{{vuexName}}
{{vuexAge}}
{{vuexBool}}
Maison interface Web Voir.js Module Vuex-Introduction à l'utilisation du partitionnement des entrepôts d'état

Module Vuex-Introduction à l'utilisation du partitionnement des entrepôts d'état

Aug 10, 2022 pm 04:01 PM
vuex module

composition vuex

vuex se compose principalement des cinq parties suivantes :

  • State // Stocke les variables et les données
  • Getter // Semblable aux propriétés calculées
  • Mutation // La seule façon de modifier l'état
  • Action / / Appel asynchrone Mutation
  • Module // Modulariser la boutique

Les modules vuex utilisent

pour créer des répertoires

Module Vuex-Introduction à lutilisation du partitionnement des entrepôts détat

Dans cet exemple, j'ai créé deux fichiers de boutique, qui sont des profils profile.jscustom.js,一个根文件index.js

custom.js

const customs = {
    namespaced: true, // 创建命名空间
    state: { // 存储变量
        showAlert: false
    },
    mutations: { // 定义修改state方法
        CHANGESHOW: (state, params) => {
            state.showAlert = !state.showAlert        }
    },
    actions: { // 异步调用mutations
        setShow: ({ commit }) => {
            commit('CHANGESHOW')
        }
    },
    getters: { // 将数据过滤输出
        bodyShow: state => state.showAlert    }}export default customs
Copier après la connexion

.js

const profile = {
  namespaced: true,
  state: {
    name: 'common name',
    age: 18,
    bool: false
  },
  mutations: {
    CHANGEMSG: (state, params) => {
      state.name = params    },
    CHANGEAGE: (state, params) => {
      state.name = params    },
    CHANGEBOOL: (state) => {
      state.bool = !state.bool    }
  },
  actions: {
    setName: ({ commit }) => {
      commit('CHANGEMSG', 'Vuex common name')
    },
    setAge: ({ commit }) => {
      commit('CHANGEAGE', 81)
    },
    setBool: ({ commit }) => {
      commit('CHANGEBOOL')
    }
  },
  getters: {
    vuexName: state => state.name,
    vuexAge: state => state.age,
    vuexBool: state => state.bool  }}export default common
Copier après la connexion

index.js

import Vue from 'vue'
import Vuex from 'vuex'

// 引入子store
import profile from './modules/profile'
import customs from './modules/customs'

// Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    profile,
    customs
  }
})

export default store // 导出store,以便于后续使用
Copier après la connexion

est utilisé dans le fichier .vue qui doit être utilisé. La méthode est la suivante

index.vue

<template>
	<div>
	  name: <h5 id="vuexName">{{vuexName}}</h5> <button @click=&#39;setName&#39;>chenge name</button>
      age: <h5 id="vuexAge">{{vuexAge}}</h5> <button @click=&#39;setAge&#39;>chenge age</button>
      bool: <h5 id="vuexBool">{{vuexBool}}</h5> <button @click=&#39;setBool&#39;>chenge bool</button>
      <br/>
      
      <span @click=&#39;setShow&#39; style=&#39;display:inline-block;width:200px;height:30px;border:1px solid #999;border-radius:5px;text-align:center;line-height:30px;cursor: pointer;&#39;>click me ,change showAlert</span>
      <em>{{bodyShow}}</em>
	</div>
</template>
<script>
import { mapActions, mapGetters } from &#39;vuex&#39;
export default {
computed: {
    ...mapGetters(&#39;profile&#39;, [&#39;vuexName&#39;, &#39;vuexAge&#39;, &#39;vuexBool&#39;]),
    ...mapGetters(&#39;customs&#39;, [&#39;bodyShow&#39;])
  },
methods: {
    ...mapActions(&#39;customs&#39;, [&#39;setShow&#39;]),
    ...mapActions(&#39;profile&#39;, [&#39;setName&#39;, &#39;setAge&#39;, &#39;setBool&#39;]),
}
</script>
<style>

</style>
Copier après la connexion

app.js

import Vue from &#39;vue&#39;;
import VueRouter from &#39;vue-router&#39;;
// style
import &#39;./../../sass/app.scss&#39;;

// Components
import Main from &#39;./Main.vue&#39;;
import routes from &#39;./routes&#39;;
// store
import store from &#39;./store&#39;;  // 将store挂载到Vue

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  saveScrollPosition: true,
});

new Vue({ router, store, ...Main }).$mount(&#39;#app&#39;);
Copier après la connexion

Rendu initial ⬇️
Module Vuex-Introduction à lutilisation du partitionnement des entrepôts détat
Rendu après avoir cliqué sur le bouton ⬇️
Module Vuex-Introduction à lutilisation du partitionnement des entrepôts détat
À ce stade, la démonstration du processus d'utilisation du module est terminée ! [Recommandations associées : Tutoriel vidéo vue.js]

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.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

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)

ModuleNotFoundError : Comment résoudre l'erreur de module Python introuvable ? ModuleNotFoundError : Comment résoudre l'erreur de module Python introuvable ? Jun 25, 2023 pm 09:30 PM

Au cours du processus de développement de Python, nous rencontrons souvent des erreurs de module introuvable. La manifestation spécifique de cette erreur est que Python signale l'une des deux erreurs suivantes : ModuleNotFoundError ou ImportError lors de l'importation du module. Cette erreur est très ennuyeuse et peut empêcher le programme de fonctionner correctement, c'est pourquoi dans cet article, nous explorerons les causes de cette erreur et comment la résoudre. ModuleNotFoundError et ImportError dans Pyth

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

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.

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

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 « 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

Java9Nouvelle fonctionnalitéMéthode de programmation modulaire du module Java9Nouvelle fonctionnalitéMéthode de programmation modulaire du module May 19, 2023 pm 01:51 PM

Dans la version Java9, le langage Java a introduit un concept très important : le module. Si vous êtes familier avec la gestion modulaire du code JavaScript, vous devriez vous sentir familier lorsque vous verrez la gestion modulaire de Java 9. 1. Qu'est-ce que le module Java ? Un peu similaires aux packages Java, les modules introduisent un autre niveau de regroupement du code Java. Chacun de ces groupes (modules) contient de nombreux sous-packages. Déclarez le dossier et ses sous-dossiers en tant que module en ajoutant le fichier module-info.java à la racine du package de fichiers de code source d'un module. La syntaxe du fichier

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.

See all articles