Familiar with Vue 2 or earlier ? You should have love the computed property. It keep track of the changes on reactive variables.

Few recommendations, if you are a beginner in Vue

Composition API and Computed

This is the default in Vue 3, so it is better to under stand the new setup. The old one too valid in Vue 3.

Setup

In Vue 3 setup, every data component that are meant to use in template should export from the setup function.

In our example a Vuex 4 store used to store the count, and perform increment.

 <template>   <div class="home">        <button @click="this.$store.dispatch('setCount',1)">Add</button>   {{count}}   </div> </template>  <script> import {useStore} from 'vuex'    import { computed,defineComponent } from 'vue'; export default defineComponent({     setup() {     const store=useStore()     const count=computed(()=>store.state.count)     return{       store ,       count     } }) </script>

In the setup we exported the computed function using arrow syntax.

In the button click we accessed the store action and thus the global state will change. Using then useStore hook let us access the state within the component.

Store

Our store look like

 import { createStore } from 'vuex' export default createStore({   state: {     count:10   },   mutations: {     increment(state,hit){       state.count+= hit;     }   },   actions: {     setCount({commit },num:number) {       commit('increment',num)     }   },   modules: {   } })
This free site is ad-supported. Learn more
​