用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组件中，我拥有的：

<template>
    <div class="menu-page">
        <h1>{{name}}</h1>
    </div>
</template>
<script>
import { mapState } from 'pinia';
import useTestPiniaStore from '@store/modules/piniaStore';

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

Pinia出现在我的Vue Dev工具中，但其中没有商店出现，我会收到错误 无法读取未定义的属性（读取“名称”）

我不明白我在这里做错了什么。如果有人能提出一些可以如此欣赏的指针。

Answer 1

mapState（） 两个参数，但您只通过了一个。

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

您的计算道具应该看起来像这样：

<script>

import { mapState } from 'pinia'

import { useTestPiniaStore } from '@/store'

export default {

  computed: {

    ...mapState(useTestPiniaStore, ['name']), 

Answer 2

当我试图使用PINIA和VUE使用选项API设置MapState时，我也没有运气。

对我有用的是使用Mapstores。这是 cookbook ：

import { mapStores } from 'pinia'

// given two stores with the following ids
const useUserStore = defineStore('user', {
  // ...
})
const useCartStore = defineStore('cart', {
  // ...
})

export default {
  computed: {
    // note we are not passing an array, just one store after the other
    // each store will be accessible as its id + 'Store'
    ...mapStores(useCartStore, useUserStore)
  },

  methods: {
    async buyStuff() {
      // use them anywhere!
      if (this.userStore.isAuthenticated()) {
        await this.cartStore.buy()
        this.$router.push('/purchased')
      }
    },
  },
}

Answer 3

我在VUE3上，我的商店在PINIA上（设置方法）。我有一些基于选项API的组件，我想在Pinia Store中使用功能（操作）和数据值。
Dominik-Serafin的建议和按照厨师书的建议cookbook/options-api.html 使用Mapstores满足我的要求。

因为我的pinia有一家带有id“ ix”的商店
在我的组件中...

...
import { mapStores } from 'pinia'
import { useixStore } from '@/stores/ix'
...
export default {
    props: ...
    data...
    computed: {
        ...mapStores( useixStore ),
        ...

根据菜谱，“默认情况下，pinia将在每个商店的ID中添加“存储”后缀。您可以通过调用setMapStoresuffix（）来自定义此行为。”

因此，现在我可以使用this.ixstore.xyz在组件脚本中访问整个商店，并在组件模板中使用ixstore.xyz ...。