Single file component <script> section

Here we are going to write the <script> section of the single file component:

1. Open the App.vue file from the src folder.
2. Create the <script> section in the file, with an export default object:

<script>
  export default {};
</script>

3. In the newly created object, add the Vue computed property with a property called counter. In this property we need to return the current $store.state.counter:

computed: {
  counter() {
    return this.$store.state.counter;
  },
},

4. Finally, create a Vue methods property with two functions, increment and decrement. Both of the functions will execute a $store.dispatch with a parameter being the function name as a string:

methods: {
  increment() {
    this.$store.dispatch('increment');
  },
  decrement() {
    this.$store.dispatch('decrement');
  },
},