javascript - Trouble setting up basic Pinia store with Vue options API - Stack Overflow

admin管理员组

文章数量:1321428

I am new to Pinia, and am having trouble setting up just a basic store. I have been following Pinia's own documentation, and cannot seem to read any state whatsoever from the vue ponent I'm mapping to the Pinia store.

In my app I have:

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

I set up a super basic Pinia store, just to get started:

import {defineStore} from 'pinia';

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

In my vue ponent I have:

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

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

Pinia appears in my Vue dev tools, but no stores appear within it, and I get the error Cannot read properties of undefined (reading 'name')

I don't understand what I am doing wrong here. If anyone can give some pointers that would be so appreciated.

I am new to Pinia, and am having trouble setting up just a basic store. I have been following Pinia's own documentation, and cannot seem to read any state whatsoever from the vue ponent I'm mapping to the Pinia store.

In my app I have:

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

I set up a super basic Pinia store, just to get started:

import {defineStore} from 'pinia';

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

In my vue ponent I have:

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

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

Pinia appears in my Vue dev tools, but no stores appear within it, and I get the error Cannot read properties of undefined (reading 'name')

I don't understand what I am doing wrong here. If anyone can give some pointers that would be so appreciated.

• javascript
• vue.js
• vuex
• pinia

Share Improve this question Follow edited Apr 27, 2022 at 23:46 tony19 139k2323 gold badges277277 silver badges347347 bronze badges asked Apr 27, 2022 at 19:41 tx291tx291 1,33166 gold badges2525 silver badges4545 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

mapState() requires two arguments, but you've passed it only one.

The 1st argument should be useTestPiniaStore, and the 2nd should be an array of state properties to map (or an object). It looks like you're trying to reference name from useTestPiniaStore, which would be undefined.

Your puted prop should look like this:

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

export default {
  puted: {
    ...mapState(useTestPiniaStore, ['name']), 

                本文标签：
                javascriptTrouble setting up basic Pinia store with Vue options APIStack Overflow

                        版权声明：本文标题：javascript - Trouble setting up basic Pinia store with Vue options API - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，
                        转载请联系作者并注明出处：http://www.betaflare.com/web/1742101412a2420817.html，
                        本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。