Cara menggunakan vue dan Element-plus untuk berkongsi dan memanggil data

Cara menggunakan vue dan Element-plus untuk berkongsi dan memanggil data

Pengenalan:
Apabila menggunakan vue dan Element-plus untuk pembangunan bahagian hadapan, perkongsian data dan panggilan adalah sangat penting. Melalui perkongsian dan panggilan data yang munasabah, kami dapat merealisasikan interaksi data antara komponen dan meningkatkan fleksibiliti dan kelajuan tindak balas aplikasi. Artikel ini akan memperkenalkan cara menggunakan vue dan Element-plus untuk merealisasikan perkongsian dan panggilan data, serta menerangkan secara terperinci melalui contoh kod.

1 Perkongsian data dalam Vue
Dalam vue, kita boleh menggunakan vuex untuk mencapai perkongsian data. vuex ialah corak pengurusan keadaan yang dibangunkan khusus untuk aplikasi Vue.js. Ia menggunakan storan terpusat untuk mengurus status semua komponen aplikasi dan menggunakan peraturan yang sepadan untuk memastikan status berubah dengan cara yang boleh diramal. Berikut ialah contoh mudah:

1. Pasang vuex
   Mula-mula, kita perlu memasang vuex menggunakan npm atau yarn:

npm install vuex

atau

yarn add vuex

2. Buat store.js fail
   Buat dalam direktori root Fail projek, digunakan untuk menyimpan dan mengurus data:

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. Perkenalkan store.js dalam main.js
   Perkenalkan fail store.js yang baru dibuat dalam main.js dan daftarkannya ke 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. Gunakan vuex dalam komponen
   Dalam komponen yang perlu berkongsi data, anda boleh menggunakan fungsi tambahan seperti mapState, mapMutations, mapActions dan mapGetters yang disediakan oleh vuex untuk memudahkan panggilan untuk menyatakan, mutasi, tindakan dan getter dalam stor. Contohnya:

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

Melalui langkah di atas, kami telah menyelesaikan perkongsian dan panggilan data menggunakan vuex in vue.

2 Perkongsian dan panggilan data dalam Element-plus
Element-plus ialah perpustakaan komponen berdasarkan rangka kerja Vue 3, yang menyediakan pembangun dengan komponen UI yang kaya dan kaedah interaksi Apabila menggunakan Element-plus, kami Perkongsian dan panggilan data juga diperlukan. Berikut ialah contoh pelaksanaan perkongsian data dan panggilan dalam Element-plus:

1. Pasang Element-plus
   Mula-mula, kita perlu memasang Element-plus menggunakan npm atau yarn:

npm install element-plus

atau

yarn add element-plus

2. dalam utama. js Perkenalkan Element-plus
   Perkenalkan gaya dan komponen Element-plus dalam 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. Gunakan Element-plus dalam komponen
   Dalam komponen yang perlu menggunakan komponen Element-plus, anda boleh terus memperkenalkan komponen yang berkaitan, Dan hanya gunakannya dalam templat. Contohnya:

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

Melalui langkah di atas, kami telah menyelesaikan perkongsian dan panggilan data dalam Element-plus.

Kesimpulan:
Melalui contoh di atas, kita dapat melihat bahawa sangat mudah untuk menggunakan vue dan Element-plus untuk berkongsi dan memanggil data. Dalam vue, kami boleh menggunakan vuex untuk pengurusan terpusat dan perkongsian data dalam Element-plus, kami boleh mentakrifkan data responsif secara langsung dalam fungsi persediaan dan menggunakannya dalam templat.

Saya harap artikel ini akan membantu anda memahami cara menggunakan vue dan Element-plus untuk berkongsi dan memanggil data. Terima kasih kerana membaca!

Atas ialah kandungan terperinci Cara menggunakan vue dan Element-plus untuk berkongsi dan memanggil data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!