Pinia的使用说明

目录

一、Pinia的官方文档

        1.英文文档

        2.中文文档

 二、项目中引入Pinia

        1.安装Pinia 

         2.创建store仓库

    1.创建一个store文件夹

     2.创建store仓库

 1.state分格

 2.组合式API

3.加载store

三、使用Pinia

        1.state风格

        2.组合式API的使用方法

---

一、Pinia的官方文档

        1.英文文档

     Pinia | The intuitive store for Vue.js

        2.中文文档

Pinia 中文文档

 二、项目中引入Pinia

        1.安装Pinia 

       npm install pinia --save

         2.创建store仓库

                     1.创建一个store文件夹

                             

                  2.创建store仓库

在count.js中书写以下代码，创建一个store仓库

1.state分格

//引入pinia
import { defineStore } from 'pinia'

/**
 * export导出
 * 
 * defineStore(参数1,参数2)
 * 参数1：命名
 * 参数2：对象
 */
export const useCountStore = defineStore("count",{
    state:()=>{
        return {
            count:20
        }
    }
})

这是一种书写方式，还有一种是组合式API(更加适合初学者，没有很多的概念)，如下：

2.组合式API

import { defineStore } from "pinia"
import { reactive } from "vue"

/**
 * 
 * 注意：这时参数2变为一个函数，不在是一个对像类型
 */

export const userInfoStore = defineStore("userInfo",()=>{
    const userInfo = reactive({
        name:"duan",
        age:20
    })
    return {
        userInfo
    }
})

3.加载store

        打开mian.js

import { createApp } from 'vue'
import App from './App.vue'
//导入pinia
import { createPinia } from "pinia"


const app = createApp(App)
//将pinia挂载到app
app.use(createPinia())
app.mount('#app')

 在此pinia已经创建完毕

三、使用Pinia 

1.state风格

<template>
    <h3>pinia组件</h3>
      <!-- 使用对应的数据 -->
    <span>count:{{ store.count }}</span>
</template>
<script setup>
    //导入对应的库
    import { useCountStore } from '../../store/count'
    //创建一个仓库对象
    const store = useCountStore()
</script>

2.组合式API的使用方法

<template>
    <h3>用户信息</h3>
    <p>用户名：{{ userInfo.name }}</p>
    <p>年龄：{{ userInfo.age }}</p>
</template>
<script setup>

import { userInfoStore } from '../store/userInfoStore.js'
const { userInfo } = userInfoStore()

</script>

Pinia的进阶使用https://blog.csdn.net/weixin_69799831/article/details/133420417?spm=1001.2014.3001.5502