How to useVue options in Vue
In this approach, we’re directly using Vue options like data, computed, and methods to set up the component and watch the store values in Vuex.
Example: The below code example implements the Vue options to watch the store values from Vuex.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GFG</title></head><body> <div id="app"> <h2 style="color: green;"> w3wiki </h2> <h2> How to watch store values from vuex? </h2> <h1> Counter (Approach 1): {{ counter }} </h1> <button @click="increment"> Increment </button> </div> <!-- VueJS CDN Link --> <script src="https://cdn.jsdelivr.net/npm/vue@2"> </script> <!-- Vuex CDN Link --> <script src="https://cdn.jsdelivr.net/npm/vuex@3"> </script> <script> // Vuex Store const store = new Vuex.Store({ state: { counter: 0, }, mutations: { increment(state) { state.counter++; }, }, }); // Vue Instance new Vue({ el: '#app', store, data() { return {}; }, computed: { counter() { return this.$store. state.counter; }, }, methods: { increment() { this.$store. commit('increment'); }, }, }); </script></body></html> |
Output:
How to Watch Store Values from Vuex ?
VueJS is one of the best frameworks for JavaScript like ReactJS. The VueJS is used to design the user interface layer. It is compatible with other libraries and extensions as well. In this article, we will learn How to watch store values from Vuex.
Table of Content
- Using Vue options
- Using Components
Contact Us