存储和读取数据

定义状态数据，在@/store/router路径下创建：

import { defineStore } from "pinia";

export const router = defineStore("router", {
    state: () => {  // 里面定义了我们的数据 
        return {
            name: "jlc",
        }
    },
    getters: {  // 里面定义了我们的计算属性
        get(state) {
            return state.name
        }
    }
})

官方给出的实例：

import { defineStore } from 'pinia'

const useStore = defineStore('storeId', {   // storeId是一个唯一状态的ID，供pinia进行管理
// 为了完整类型推理，推荐使用箭头函数
state: () => {  // 里面定义了我们的数据 
 return {
   // 所有这些属性都将自动推断出它们的类型
   count: 0,
   name: 'Eduardo',
   isAdmin: true,
   items: [],
   hasChanged: true,
 }
},
})

在组件中使用状态数据：

<template>
</template>

<script setup lang="ts">
import { router } from '@/store/router';

// 直接获取状态中的值
const routerStore = router();
console.log(routerStore.name);  // 直接读取状态  在控制台中显示jlc
console.log(routerStore.get);  // 也可以通过get方法读取具体的属性值  在控制台中显示jlc
</script>

<style lang="scss">
</style>

storeToRefs

借助storeToRefs将store中的数据转为ref对象，方便在模板中使用，将 pinia 中的 store 对象中的状态转换为具有 .value 的ref对象集合

注意：pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中数据

使用 storeToRefs 需要进行引入：import { storeToRefs } from 'pinia'

// 使用storeToRefs转换countStore，随后解构
const { sum } = storeToRefs(countStore)
// 后续就可以当做ref对象进行使用，如：
sum.value