Pinia

实现多个组件中的数据传递

• 组件传参
• 路由传参
• 通过Pinia状态管理定义共享数据

Pinia在使用时，有点像Sevlet中的域对象

Pinia数据无法进行持久化，Pinia结合SessionStorage或者LocalStorage可解决这个问题

Pinia的数据默认为响应式数据，且实时更新

---

Pinia安装依赖

在使用Pinia之前，我们按例首先安装他的依赖

npm install pinia

---

Pinia轻松访问

store.js

在src文件夹下建立store文件夹 -> 建立store.js文件用来存放共享数据

从Pinia框架中导入defineStore，此方法用来定义Pinia的共享数据

defineStore中有以下属性：

• id：当前数据的id，全局唯一
• state：对象本身的属性
• getters：get方法，调用时直接 对象.方法 的形式调用
• actions：set方法，调用时使用 对象.方法() 的形式调用

// 定义共享数据
import {defineStore} from "pinia"

export const definedPerson = defineStore(
    {
        id: "personPinia", //当前数据的id，必须全局唯一（多个文件中也不可以重复）
        state: () => {
            return {
                username: "xiaobai",
                age: 18,
                hobbies: ["唱歌", "跳舞"]
            }
        },
        getters: {
            //专门定义一些获得数据，或使用数据计算结果的方法，这里的函数不要修改数据
            getAge() {
                return this.age;
            },
            getHobbiesCount() {
                return this.hobbies.length
            }
        },
        actions: {
            //专门定义一些修改数据的函数（setter）
            doubleAge() {
                this.age = this.age * 2
            }
        }
    }
)

---

pinia.js

在src下建立一个pinia.js，存放一个建立好的pinia对象，方便main.js导入

import {createPinia} from "pinia"

const pinia = createPinia()

export default pinia

main.js

我们需要在main.js中使用全局Pinia，就如同使用router一样

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)

import router from './routers/router'
app.use(router)

import pinia from "./pinia.js";
app.use(pinia)

app.mount('#app')

---

组件中使用数据

导入我们暴露的对象，使用其构建一个对象

这种语法源自于js的原型链，即“函数即对象”一概念，对象方法在调用自身时，会返回自己本身

import {definedPerson} from "../store/store.js"
const person = definedPerson()

Pinia中有一些自己的API

• $reset：将所有的值恢复默认，即store.js定义的那样
• $patch：批量修改多个属性值

<!--    恢复默认值-->
<button @click="person.$reset()">恢复默认</button>
<!--    一次修改多个属性值-->
<button @click="person.$patch({username:'奥特曼',age:20,hobbies:['打怪兽']})">变身奥特曼</button>

---

语法小细节

ID外置

我们可以将Pinia共享数据中的id参数拿出来，作为defineStore的第一个参数使用

// 定义共享数据
import {defineStore} from "pinia"

export const definedPerson = defineStore("personPinia", 
    {
        ……
    }
)

---

改写getters方法使用箭头函数

当然，我们可以使用箭头函数，但需要注意的是，箭头函数没有自己的this，所以要将state作为参数传进来，使用state去调用对象定义的属性

// 定义共享数据
import {defineStore} from "pinia"

export const definedPerson = defineStore("personPinia", 
    {
        state: () => {
            return {
                ……
            }
        },
        getters: {
            //专门定义一些获得数据，或使用数据计算结果的方法，这里的函数不要修改数据
            getAge:(state) => {
                return state.age;
            },
            getHobbiesCount:(state) => {
                return state.hobbies.length
            }
        },
		……
    }
)

---