使用 Vue 选项 API 设置基本 Pinia 商店时遇到问题

Question

我是 Pinia 的新手，在建立一家基本商店时遇到困难。我一直在关注 Pinia 自己的文档，但似乎无法从我映射到 Pinia 商店的 vue 组件中读取任何状态。

在我的应用程序中我有：

import { createPinia } from 'pinia';
export default function initApp(el) {
    let app = createApp(MenuApp);
    app.use(router).use(createPinia()).mount(el);
}

我建立了一个超级基本的 Pinia 商店，只是为了开始：

import {defineStore} from 'pinia';

export const useTestPiniaStore = defineStore('testStore', {
    state: () => {
        return {
            name: 'bob'
        }
    },
})

在我的 vue 组件中，我有：

import { createPinia } from 'pinia';
export default function initApp(el) {
    let app = createApp(MenuApp);
    app.use(router).use(createPinia()).mount(el);
}

Pinia 出现在我的 Vue 开发工具中，但其中没有出现商店，并且出现错误 Cannot read properties of undefined (reading 'name')

我不明白我在这里做错了什么。如果有人可以给出一些指示，我们将不胜感激。

Answer 1

mapState()需要两个参数，但您只传递了一个。

第一个参数应该是useTestPiniaStore，第二个参数应该是要映射的状态属性数组（或对象）。看来您正在尝试引用name，useTestPiniaStore这将是undefined.

您计算出的 prop 应该如下所示：

<script>
import { mapState } from 'pinia'
import { useTestPiniaStore } from '@/store'

export default {
  computed: {
    ...mapState(useTestPiniaStore, ['name']), 
  },
}
</script>

演示