核心概念-State

大多数时候，state 是 store 的核心部分。 我们通常从定义应用程序的状态开始。 在 Pinia 中，状态被定义为返回初始状态的函数

xxxxxxxxxx
import { defineStore } from "pinia"

export const useCountStore = defineStore("count",{
    state:() =>{
        return{
            count:10
        }
    }
})

访问 “state”

使用组合式API

虽然 Composition API 并不适合所有人，但 setup() 钩子可以使在 Options API 中使用 Pinia 更容易。 不需要额外的 map helper！

xxxxxxxxxx
<template>
    <h3>Pinia</h3>
    <p>Count1:{{ count }}</p>
</template>
<script setup>
import { useCountStore } from "../store/count"
const { count } = useCountStore();
</script>

选项式API

如果您不使用 Composition API，并且使用的是 computed、methods、...，则可以使用 mapState() 帮助器将状态属性映射为只读计算属性

xxxxxxxxxx
<template>
    <p>Count2:{{ count }}</p>
    <p>Count2:{{ doubleCount }}</p>
</template>
<script>
import { mapState } from "pinia"
import { useCountStore } from "../store/count"
export default {
    computed:{
        ...mapState(useCountStore,{
            myOwnName:"count",
            count:store => store.count,
            doubleCount(store){
                return store.count * 2
            }
        })
    }
}
</script>

实时效果反馈

1. 下列代码中，画横线的地方填写的是：

xxxxxxxxxx
import { defineStore } from "pinia"
export const useCountStore = defineStore("count",{
    state:() =>{
        return{
            count:10
        }
    }
})

xxxxxxxxxx
<template>
    <p>Count2:{{ count }}</p>
    <p>Count2:{{ doubleCount }}</p>
</template>
<script>
import { mapState } from "pinia"
import { useCountStore } from "../store/count"
export default {
    computed:{
        ...mapState(___,{
            myOwnName:"count",
            count:store => store.count,
            doubleCount(store){
                return store.count * 2
            }
        })
    }
}
</script>

A pinia

B vue

C useCountStore

D store

答案

1=>C