Question

Pinia Store 与 Vue

2022-09-07

1878

javascript vue.js

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

这是我的代码

Pinia Store：

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

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

Answer 2

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

我来晚了，但也许可以帮助别人。

首先，您应该删除该返回。像这样，您的商店定义为 useCounterStore().return.counter

这可能不是您想要的。

然后删除此日志 console.log(storeCounter.store.counter); ，因为它会因不存在的 store 而失败。这正是错误告诉您的。它正在尝试读取未定义 ( store ) 的属性 ( counter )。

如果您想读取商店，您应该直接获取您的状态，就像您正确使用第二个控制台日志一样，现在可以工作了 console.log(storeCounter.counter);

因此，这是您的商店的更正版本：

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