How to use vue and Element-plus to share and call data

How to use vue and Element-plus to share and call data

Introduction:
When using vue and Element-plus for front-end development, data sharing and calling are very important. Through reasonable data sharing and calling, we can realize data interaction between components and improve the flexibility and response speed of the application. This article will introduce how to use vue and Element-plus to realize data sharing and calling, and explain in detail through code examples.

1. Data sharing in Vue
In vue, we can use vuex to achieve data sharing. vuex is a state management pattern developed specifically for Vue.js applications. It uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way. Here is a simple example:

1. Install vuex
   First, we need to install vuex using npm or yarn:

npm install vuex

or

yarn add vuex

2. Create store.js file
   Create a store.js file in the root directory of the project for storing and managing 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. Introduced in main.js store.js
   Introduce the store.js file just created in main.js and register it to the vue instance:

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

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

4. Use vuex
   in the component In components that need to share data, you can use auxiliary functions such as mapState, mapMutations, mapActions, and mapGetters provided by vuex to simplify calls to state, mutations, actions, and getters in the store. For example:

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

Through the above steps, we have completed the sharing and calling of data using vuex in vue.

2. Data sharing and calling in Element-plus
Element-plus is a component library based on the Vue 3 framework, which provides developers with rich UI components and interaction methods. When using Element-plus, we also need to share and call data. The following is an example of data sharing and calling in Element-plus:

1. Installing Element-plus
   First, we need to use npm or yarn to install Element-plus:

npm install element-plus

or

yarn add element-plus

2. Introduce Element-plus into main.js
   Introduce Element-plus styles and components into 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. Using Element-plus in components
   In components that need to use Element-plus components, you can directly introduce the relevant components and use them in the template. For example:

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

Through the above steps, we have completed the sharing and calling of data in Element-plus.

Conclusion:
Through the above examples, we can see that it is very simple to use vue and Element-plus to share and call data. In vue, we can use vuex for centralized management and sharing of data; in Element-plus, we can directly define responsive data in the setup function and use it in the template.

I hope this article will help you understand how to use vue and Element-plus to share and call data. thanks for reading!

The above is the detailed content of How to use vue and Element-plus to share and call data. For more information, please follow other related articles on the PHP Chinese website!