Comment utiliser vue et Element-plus pour partager et appeler des données

Comment utiliser vue et Element-plus pour partager et appeler des données

Introduction :
Lors de l'utilisation de vue et Element-plus pour le développement front-end, le partage de données et les appels sont très importants. Grâce à un partage et à des appels raisonnables de données, nous pouvons réaliser une interaction de données entre les composants et améliorer la flexibilité et la vitesse de réponse de l'application. Cet article expliquera comment utiliser vue et Element-plus pour partager et appeler des données, et expliquera en détail à travers des exemples de code.

1. Partage de données dans Vue
Dans vue, nous pouvons utiliser vuex pour réaliser le partage de données. vuex est un modèle de gestion d'état développé spécifiquement pour les applications Vue.js. Il utilise un stockage centralisé pour gérer l'état de tous les composants de l'application et utilise les règles correspondantes pour garantir que l'état change de manière prévisible. Voici un exemple simple :

1. Installez vuex
   Tout d'abord, nous devons installer vuex en utilisant npm ou Yarn :

npm install vuex

ou

yarn add vuex

2. Créez un fichier store.js
   Créez un store.js dans le répertoire racine de le fichier du projet, utilisé pour stocker et gérer les données :

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++
        },
        decrement(state) {
            state.count--
        }
    },
    actions: {
        increment({ commit }) {
            commit('increment')
        },
        decrement({ commit }) {
            commit('decrement')
        }
    },
    getters: {
        getCount(state) {
            return state.count
        }
    }
})

3. Introduisez store.js dans main.js
   Introduisez le fichier store.js que vous venez de créer dans main.js et enregistrez-le dans l'instance vue :

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
    el: '#app',
    store,
    render: h => h(App)
})

4. Utilisez vuex dans les composants
   Dans les composants qui doivent partager des données, vous pouvez utiliser des fonctions auxiliaires telles que mapState, mapMutations, mapActions et mapGetters fournies par vuex pour simplifier les appels à l'état, les mutations, les actions et les getters dans le magasin. Par exemple :

<template>
    <div>
        <p>Count: {{ count }}</p>
        <button @click="increment">Increment</button>
        <button @click="decrement">Decrement</button>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
    computed: {
        ...mapState(['count'])
    },
    methods: {
        ...mapMutations(['increment', 'decrement'])
    }
}
</script>

Grâce aux étapes ci-dessus, nous avons terminé le partage et l'appel des données en utilisant vuex dans vue.

2. Partage de données et appel dans Element-plus
Element-plus est une bibliothèque de composants basée sur le framework Vue 3, qui fournit aux développeurs de riches composants d'interface utilisateur et des méthodes d'interaction. Lors de l'utilisation d'Element-plus, nous partageons et appelons des données. également requis. Voici un exemple d'implémentation de partage de données et d'appel dans Element-plus :

1. Installez Element-plus
   Tout d'abord, nous devons installer Element-plus en utilisant npm ou Yarn :

npm install element-plus

ou

yarn add element-plus

2. dans main. js Introduire Element-plus
   Introduire les styles et les composants Element-plus dans main.js :

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

createApp(App)
    .use(ElementPlus)
    .mount('#app')

3. Utiliser Element-plus dans les composants
   Dans les composants qui doivent utiliser des composants Element-plus, vous pouvez directement introduire les composants associés, et simplement utilisez-le dans le modèle. Par exemple :

<template>
    <div>
        <el-button type="primary" @click="increment">Increment</el-button>
        <el-button type="primary" @click="decrement">Decrement</el-button>
        <p>Count: {{ count }}</p>
    </div>
</template>

<script>
import { reactive } from 'vue'

export default {
    setup() {
        const state = reactive({
            count: 0
        })

        const increment = () => {
            state.count++
        }

        const decrement = () => {
            state.count--
        }

        return {
            count: state.count,
            increment,
            decrement
        }
    }
}
</script>

Grâce aux étapes ci-dessus, nous avons terminé le partage et l'appel des données dans Element-plus.

Conclusion :
À travers les exemples ci-dessus, nous pouvons voir qu'il est très simple d'utiliser vue et Element-plus pour partager et appeler des données. Dans vue, nous pouvons utiliser vuex pour la gestion et le partage centralisés des données ; dans Element-plus, nous pouvons définir directement des données réactives dans la fonction de configuration et les utiliser dans le modèle.

J'espère que cet article vous aidera à comprendre comment utiliser vue et Element-plus pour partager et appeler des données. Merci d'avoir lu!

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!