皮尼亚学习笔记 (1.0)

  首先贴出官网地址：开始 | Pinia

pinia作为Vue3项目中常用的状态管理工具，正逐渐取代vuex，现从0到1自己搭建pinia仓库。

首先，安装pinia，使用包管理器工具（npm,pnpm,yarn,Bun等都可以）

安装成功后，就会在package.json中找到

然后就是在入口文件中使用（我是用的是vite创建的项目，所以入口文件就是main.ts）:

创建pinia实例并使用，相关的创建代码中，移到了Store文件夹中。

具体内容如下：
 

import {createPinia} from 'pinia'

//创建大仓库

let pinia=createPinia()


//导出仓库
export default pinia;

然后需要在入口文件中使用：
 

这样就建立了一个空的仓库 ，然后我们还需要定义一个Store，在Vuex中对应的state，getter，action中，都会在Store中进行定义。

定义Store是用defineStore函数定义的

然后我自己新建一个空文件testStore.ts

内容如下：

import { defineStore } from "pinia";

let useTestStore=defineStore("test",{
    state:()=>{
        return {
            name:"test",
            count:10
        }
    },
   getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

export default useTestStore;

这里需要注意几个点：首先，定义Store一般需要以use开头，第一个参数是你的应用中 Store 的唯一 ID。第二个参数就是仓库的配置项，state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)。上面的写法是选项式写法，写过vuex的可能会对此写法更加的熟悉，但是pinia还有另一种组合式写法，习惯使用组合式API的可能更喜欢这种写法。

将上面的代码转换成组合式写法（setup）

import { defineStore } from "pinia";
import { ref,computed } from "vue";
let useTestStore=defineStore("test",()=>{
    const count=ref(10)
    const name=ref('test')

    const doubleCount=computed(()=>count.value*2)

    //注意，action中的方法不要写成箭头函数
    function increment() {
        count.value++;
    }

    return {
        count,
        name,
        doubleCount,
        increment
    }
})

export default useTestStore;

在组合式写法中，state中的属性需要使用ref定义，getters中的计算属性就直接使用computed（）进行使用即可，而actions则在下面直接进行函数（普通函数）定义即可。

这样我们的仓库就定义好了，我们需要再组件中进行使用。

这里是再项目中使用了路由，所以需要根据指定路径进行跳转，在控制台中，我们可以看到打印的信息，我们就可以直接使用插值语法直接渲染在页面中。

 

然后使用按钮修改count的值，看对应的getter和action中定义的方法。

 

全部代码如下：

<template>
 <div>
  {{ testStore.name }}---{{ testStore.count }}
  <el-button type="primary" size="default" @click="handler">点我修改count</el-button>
  
 </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
import useTestStore from '../../store/testStore';


const testStore = useTestStore()

console.log(testStore);

const handler=()=>[
    testStore.increment(),
    
    console.log(testStore.doubleCount)
]
</script>

<style scoped lang="scss">

</style>

 这样我们就使用了仓库中的方法和计算属性，以及仓库中存储的state。当然了，同步和异步的方法都可以直接写在仓库中，因为pinia中没有mutation，所以一个action中可以书写同步和异步的方法，大大简化了状态更新流程。

当然了仓库，可以建立多个，我们可以建立多个ts文件来创建不同功能的Store，用到的时候需要那个仓库就进行引入即可。

还有就是Store可以嵌套，就是在定义一个Store时，可以使用领一个Store中的数据，代码演示如下：

/*
 * @Author: RealRoad
 * @Date: 2024-10-14 15:50:02
 * @LastEditors: Do not edit
 * @LastEditTime: 2024-10-14 16:00:44
 * @Description: 
 * @FilePath: \project_10_08\vite-project\src\store\testStore.ts
 */
import { defineStore } from "pinia";
import { ref,computed } from "vue";
let useTest2Store=defineStore("test2",()=>{
    const count=ref(10)
    const name=ref('test')
    const huawei=ref('遥遥领先')

    const doubleCount=computed(()=>count.value*2)

    //注意，action中的方法不要写成箭头函数
    function increment() {
        count.value++;
    }

    return {
        count,
        name,
        doubleCount,
        increment,
        huawei
    }
})

export default useTest2Store;

注意，这里的仓库名不要和领一个仓库名重名！！！

仓库定义如下：

/*
 * @Author: RealRoad
 * @Date: 2024-10-14 15:50:02
 * @LastEditors: Do not edit
 * @LastEditTime: 2024-10-14 16:00:44
 * @Description: 
 * @FilePath: \project_10_08\vite-project\src\store\testStore.ts
 */
import { defineStore } from "pinia";
import { ref,computed } from "vue";
import useTest2Store from "./testStore2";
let useTestStore=defineStore("test",()=>{
    const count=ref(10)
    const name=ref('test')
    const iphone=useTest2Store()

    const doubleCount=computed(()=>count.value*2)

    //注意，action中的方法不要写成箭头函数
    function increment() {
        count.value++;
    }

    return {
        count,
        name,
        doubleCount,
        increment,
        iphone:iphone.huawei
    }
})

export default useTestStore;

界面直接使用：

 给pinia添加插件

就是在定义大仓库导出大仓库之前进行插件定义，然后使用pinia实例进行使用该插件，就相当于默认给pinia添加了一些属性和方法，这样，无论是哪个Store，都可以直接使用这些插件。

那么pinia实例的定义如下：

import {createPinia} from 'pinia'

//创建大仓库
//创建时给pinia仓库一个默认的属性值
function piniaPlugin(){
    return {default:'Hello MEZ!!'}
}
let pinia=createPinia()
pinia.use(piniaPlugin)

//导出仓库
export default pinia;

然后我们在使用仓库的时候，就可以直接使用。

虽然ts爆红，但是不影响使用