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

Script setup and Computed

<Script setup> is here to simplifying the creation of component in Vue3. It let us import and use component without registering and create method as regular TS/JS arrow function.

<script 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 setup> import {useStore} from 'vuex'  import { computed,} from 'vue'; const store=useStore(); const  count= computed(() => store.state.count)    </script>

In the setup we created object for store and a computed property and note that the define component no longer needed.

In the button click accessed the store action and thus the global state will change. Using the 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
​