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

9avjhtql 于 2023-05-01 发布在 Vue.js

关注(0)|答案(2)|浏览(464)

我是新来皮尼亚，并有麻烦建立只是一个基本的商店。我一直在关注Pinia自己的文档，似乎无法从我Map到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开发工具中，但没有商店出现，我得到错误Cannot read properties of undefined (reading 'name')
我不明白我做错了什么。如果有人能给予点建议，那将是非常感激的。

vue.js

来源：https://stackoverflow.com/questions/72034431/trouble-setting-up-basic-pinia-store-with-vue-options-api

2条答案

按热度按时间

jv4diomz1#

mapState()需要两个参数，但您只传递了一个参数。
第一个参数应该是useTestPiniaStore，第二个应该是要Map的状态属性数组（或对象）。看起来像是试图从useTestPiniaStore引用name，也就是undefined。
您的计算 prop 应该如下所示：

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

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

demo

赞(0）回复(0）举报 2023-05-01

6fe3ivhb2#

当我试图使用Options API同时使用Pinia和Vue设置mapState时，我的运气也不好。
对我有用的是使用mapStores。下面是食谱中的一个例子：

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')
      }
    },
  },
}

赞(0）回复(0）举报 2023-05-01

我来回答

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

2条答案

相关问题

热门标签

最新问答