Pinia Store with Vue

Question

I am getting an error on my component. Can someone help to solve this? I'm work in vue 3 version. Getting an error: "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'counter')" Does anyone have any insights?

This id my code

Pinia Store:

import { ref, computed } from "vue"
import { defineStore } from "pinia"

export const useCounterStore = defineStore("counter", {
  state: () => {
    return {
      counter: 0
    }
  }
})

script:

<script setup>
  import { computed, ref } from "@vue/reactivity"
  import { useCounterStore } from "@/stores/counter"

  const storeCounter = useCounterStore()
  console.log(storeCounter)

  console.log(storeCounter.store.counter)
  console.log(storeCounter.counter)
</script>

and template:

<template>
  <div class="home">
    <div class="count">{{storeCounter.counter}}</div>
  </div>
</template>

Answer 1

One of these console.log statements works, the other does not

console.log(storeCounter.store.counter); // bad syntax, no store object on storeCounter
console.log(storeCounter.counter); // correct

All you have to do is delete the offending line. Simple.