Pass value between components - Vue JS

In this article, we will teach you how to pass value between 2 components in Vue JS. We will be using Vuex for this.

Video tutorial

Create a store

First, you need to create a store. To do this, install a module named vuex. Run the following command in your terminal:

npm install vuex

After that, you must create a folder named “vuex” in your “src” folder. Then, create a file named “store.js” inside “vuex” folder. Following will be the content of store.js file:

import { createStore } from "vuex"

export default createStore({
	state() {
		return {
			variable: 123
		}
	},

	// [mutations goes here]

	// [getters goes here]
})

“variable” will be the variable that you need to pass between components. You can set its default value here.

Pass value to component 1

Let’s say you want to display the value in component 1. So I am going to create a simple paragraph tag to display a value.

<p v-text="variable"></p>

And we need to make this variable a computed property. So we will write the following Javascript code in component 1.

import store from "../vuex/store"

export default {
	computed: {
		variable: function () {
			return store.getters.getVariable
		}
	}
}

First, we are including the store file that we created in the previous step. Our component is in “src/components” folder, and store file is in “src/vuex”, so we have to move a step back using “../”.

Then we are created a computed property “variable”, and it returns the “getVariable” value from the store getters object. The getters is the built-in property in Vuex store. And “getVariable” will be a function that we need to create in our store file.

So write the following code in the [getters goes here] section of store.js file:

getters: {
	getVariable: function (state) {
		return state.variable
	}
}

It accepts a state object as an argument. And with this object, you can call the variables in the state() function create in the first step. Run the component 1 now and you will see the value “123” in your paragraph.

Pass value from component 2

Now support in your component 2, you want to change its value and it should reflect in component 1 as well. First, write the following code in the [mutations goes here] section of store.js file:

mutations: {
	setVariable: function (state, newValue) {
		state.variable = newValue
	}
}

It accepts state and newValue as arguments. With the state object, you can change the values. And newValue is simply the new value that will be passed to it.

To call this function, we are going to create a simple button in our component 2.

<button type="button" v-on:click="updateVariable">Update variable</button>

Then we are going to create this method in our Javascript and call the setVariable function from our store file.

import store from "../vuex/store"

export default {
	methods: {
		updateVariable: function () {
			store.commit("setVariable", 567)
		}
	}
}

commit function from Vuex store will call the function created in mutations object. Second parameter will be the new value. Run the app now and click on the button. As soon as you press the button, you will notice that the variable value in 1st component will automatically get updated.

Source code

[wpdm_package id=’1733′]

Conclusion

So you have learned how to create a Vuex store in Vue JS, and how to pass value between components in Vue JS. If you face any problems in following this, kindly do let me know. We also created a chat application where we implemented this technique, so you will know how it is used practically in projects.

Post Views: 71

Pass value between components – Vue JS