Using Pinia to create a store

Let’s start using Pinia by demonstrating how to define a store within it and then use the state data in an application:

1. Create a new Vue application and enable Pinia, as shown in Figure 10.2. This will give you a Vue application with a store already created. You will find it under src/stores/counter.js:

   import { defineStore } from 'pinia'
   export const useCounterStore = defineStore({
     id: 'counter',
     state: () => ({
       counter: 1
     }),
     getters: {
       doubleCount: (state) => state.counter * 2
     },
     actions: {
       increment() {
         this.counter++
       }
     }
   })

This simple Pinia file demonstrates all three of the major aspects we defined previously – the state, getters, and actions. In this section, we’re only concerned...