DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Data Engineering
  3. Data
  4. Components and How They Interact in Vue and Vuex

Components and How They Interact in Vue and Vuex

A discussion of how components share data between themselves on a large scale, with sample code to make this work in a Vue/Vuex application .

Sibu Stephen user avatar by
Sibu Stephen
·
May. 23, 18 · Tutorial
Like (4)
Save
Tweet
Share
22.80K Views

Join the DZone community and get the full member experience.

Join For Free

Vue, being a progressive framework, is similar to Angular in terms of syntax. In order to understand what components are in Vue and where Vuex comes into the picture, first, we will go through how Vue provides the ability to share data between components.

What Is a Component and Why Do We Need to Share the Data Between Components?

If you are familiar with Angular directives, then it's just like a simple directive wherein we can write our own logic, provide a pattern (template), and call that component (rather than registering the component to the root instance).

Normal interaction between parent and child component

Example :

//Button directive component

Vue.component('button-directive', {
  data: function () {
    return {
    counterValue: 0
    }
  }
  template: '<span>-Button Counter-</span><button v-on:click="counterValue++">{{ count }}</button>'
});

<div id="directive">
<button-directive></button-directive>
</div>

In the above example, button-directive is a component which includes the logic for incrementing the button counter value as well as the template which will actually render the button. These components can be shared with other components when declared at the top level. To know more about components, visit Vue's component documentation. 

The above example shows a single component, but what if there are multiple components with parent and child components sharing the same instance with each other? Sharing between the components (child component and parent component) occurs using various techniques.

1. Props and Events

Props allow you to pass any data type to a child component and allow you to control what sort of data your component receives. This allows a child component to update whenever the parent's data changes. For more information, visit Vue's props documentation. Events are a way of passing the updated information from the child component to the parent component. Events provide a way to inform your parent components of changes in children.

Example: 

<my-component @eventExample="parentHandler"></my-component>

Here my component is a child component with eventExample which will trigger any changes (internally, it uses -  v-on:eventExample ).

An event can be fired in a similar format:

export default {
  methods: {
    fireEvent() {
      this.$emit('eventExample', eventValueOne);
    }
  }
}

Both props and events can be used together with v-modal for two way binding where a change in the input value will call the triggerEvent method.

Example:

<template>
  <div>
  <input type="text" :value="value" @input="triggerEvent"/>
  </div>
</template>

<script>
  export default {
    props: {
    value: String
    },
    methods: {
      triggerEvent(event) {
      this.$emit('input', event.target.value);
      }
    }
  }
</script>

2. Provide/Inject

This allows for the selective exposition of data or methods from an ancestor component to all of its descendants. While provide/inject is not itself reactive, it can be used to pass reactive objects.

Example: Consider two components and those two components sharing. 

const Provider = {
    provide: {
        foo: 'bar'
    },
    template: `<div><slot><slot></div>`
}

const Child = {
    inject: ['foo'],
    template: `<div>{{ foo }} injected. <slot><slot></div>`,
}

new Vue({
    el: '#app',
    components: {
        Child,
        Provider
    }
})

Where Vuex Comes Into the Picture?

As discussed above, we can share instances between two components or, let's say, three components; the problem comes in when one gets into a scenario where one component is shared between two or three components, or even more. Let's say there is a large scale application, which has hundreds of components in it, and one component has a prop that needs to be shared between 50 others; won't that be a problematic issue to maintain the state of that component? In order to handle that, Vuex maintains the state and any changes in the state are handled using mutation, and the mutation can be called using commit.

Vuex, in short, reactively updates any components that are reading data from the store.

  • Actions - Where the state receives the go-ahead values to change the state.

  • Mutation - Where the actual state changes.

Consider the following example. 

Note: In order to initialize store, I'm creating a new instance of Vues.Store.

/* Store where the state is initialized and the values are mutated depending upon the values */

var stateManager = new Vuex.Store {
  state: {
      state1: '', // Initialize the state1
      state2: ''  // Initialize the state2
  }

  actions:{
      // API's can be called here and then accordingly can be passed for mutation
  },

  mutations: {
    changeStateOne(state, payload) {
      state.state1 += payload; // Recieved the payload from the action at the bottom
    },
    changeStateTwo(state, payload) {
      state.state2 += payload; // Recieved the payload from the action at the bottom.
    }
  }
}

// Component one
const componentOne = {
  template: `<div class="componentOne">{{ stateManagerComponent }}</div>`,
  computed: {
    stateManagerComponent() {
      return {
          stateManager.state.state1
          stateManager.state.state2
      }
    }
  }

}


// Component Two
const componentTwo = {
    template: `<div class="componentTwo">{{ stastateManagerComponentteManagerComponent }}</div>`,
    computed: {
        stateManagerComponent() {
            return {
                stateManager.state.state1
                stateManager.state.state2
            }
        }
    }
}



new Vue({
    el: '#app-container',
    components: {
        componentOne,
        componentTwo
    }
    methods: {
        increaseStatesValue() {
            stateManager.commit('changeStateOne', 1); // Action with value one that is sent to the store
            stateManager.commit('changeStateTwo', 2); // Action with value two that is sent to the store
        }
    }
})

  // Thus resulting to a shared state between two components.
<div id="app-container">
<div class="componentOne">{{ stateManagerComponent }}</div>
<div class="componentTwo">{{ stateManagerComponent }}</div>
</div>

In the above example, we see two components sharing the same state between each other wherein the components share the same state with each other and the values get appended in both the components through one single store (in the above example case it is stateManager which is a store of states).

Note on Actions: In the above example, tge Action is the increaseStatesValue() function which is providing the payload to the changeStateOne and changeStateTwo functions in the mutation part.

The above example of Vuex can be mapped in the below diagram.

Image title

Architecture wise, Vuex uses flux as it's method. To learn more about flux, check flux patterns' docs.

I hope this article provides some idea as to why Vuex is used in Vue applications and how it provides smooth communication between two components and promotes ease of change in values between the states.

Data (computing) Data Types Event application Flux (machine-learning framework) Pass (software) Documentation IT Directive (programming)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • DevSecOps Benefits and Challenges
  • Why Does DevOps Recommend Shift-Left Testing Principles?
  • Why Every Fintech Company Needs DevOps
  • Cloud Native London Meetup: 3 Pitfalls Everyone Should Avoid With Cloud Data

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: