使用 Vue 的 Pinia 商店

Question

我的组件出现错误。 有人可以帮助解决这个问题吗？ 我在 vue 3 版本中工作。 出现错误：“未捕获（承诺）TypeError：无法读取未定义的属性（读取'计数器'）”有人有任何见解吗？

这是我的代码

松树专卖店：

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

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

脚本：

<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>

和模板：

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

Answer 1

这些 console.log 语句之一有效，另一个无效

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

您所要做的就是删除有问题的行。 简单的。