pinia的基本使用

1、pinia在vue3项目中的接入

点击查看pinia官网地址

1-1、安装

yarn add pinia
# 或者使用 npm
npm install pinia --save

1-2、在src目录下新建一个store的目录，里面新建一个user.ts的文件

import { defineStore } from 'pinia'

interface IPersonObj {
    name: string
    people: {
        parent: {
            age: number
            dad: string
            mom: string
        }
    }
}
export const useUserStore = defineStore({
    id: 'user', // id必填，且需要唯一
    state: () => {
        return {
            name: '张三',
            people: {
                name: 'xiaoming',
                age: 28,
                parent: {
                    mom: 'lili',
                    dad: 'haha',
                },
            },
        }
    },

    actions: {
        updateName(obj: IPersonObj) {
            this.name = obj.name
            this.people.parent.dad = obj.people.parent.dad
            this.people.parent.mom = obj.people.parent.mom
            this.people.age = obj.people.parent.age
        },
    },
    getters: {
        getNames: (state) => state.name,
    },
})

1-3、在src目录下新建一个store的目录，里面新建一个index.ts的文件

该文件中引入所有开发人员制作的各种store，然后进行整合，统一暴露出去，供vue文件使用

1-2中的user.ts 就在这里引入，进行整合了

import { createPinia } from 'pinia'

// 1、默认暴露Pinia给main.ts去挂载
const store = createPinia()
console.log('import.meta.env==>', import.meta.env)
export default store

// 1、开发中，开发人员定义的各种pinia的store，这里进行整合，统一暴露出去，供vue文件使用
import { useUserStore } from '@/store/user'
export const usePiniaStore = function () {
	return {
		useUserStore: useUserStore(),
	}
}
// 2、或者新建一个ts文件，按照如下写法也可以，同样是进行整合，统一暴露出去，供vue文件使用
// import { useUserStore } from '@/store/user'

// export default function usePiniaStore() {
// 	return {
// 		useUserStore: useUserStore(),
// 	}
// }

1-4、在main.ts文件中引入

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

// 创建vue实例
const app = createApp(App)

// 挂载pinia
app.use(store)

// 挂载实例
app.mount('#app')

2、初始化数据+更新数据

使用pinia的数据，进行页面初始化和数据更新操作

<template>
    <div>
        <div>pinia中的state获取的数据{{ name }}</div>
        <div>pinia中的getters获取的数据{{ getNames }}</div>
        <div>{{ people.age }}</div>
        <div>{{ people.parent.dad }}</div>
        <div>{{ people.parent.mom }}</div>
        <el-button type="primary" @click="edit">点击修改status数据</el-button>

        <div>{{ refOfObj1.name }}</div>
    </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { usePiniaStore } from '@/store'

// 拿到对应的store
const { useUserStore } = usePiniaStore() 
// 拿到对应的store里面的对应的state和getters
const { name, people, getNames } = storeToRefs(useUserStore) 
// const { name, people, getNames } = useUserStore // 会丢失响应式
const { updateName } = useUserStore // 拿到对应的store里面的对应的action

// storeToRefs的说明：
// 直接解构store实例， 会使数据丢失响应式
// 通过storeToRefs包裹 store实例 可以解决这一问题
// storeToRefs只能把state里面的数据变为单独的响应式的ref 但是不能解构 actions 中的方法

const obj1 = { name: '小明' }
const refOfObj1 = reactive(obj1)

const edit = () => {
    console.log('被点击了')
    refOfObj1.name = '小明被改变了'

    // 修改pinia中的某一个store中的数据
    // // 方式一：直接修改 state （不推荐）
    // useUserStore.name = '李四'

    // // 方式二：如果需要修改多个数据，建议使用 $patch 批量更新
    // useUserStore.$patch({
    // 	name: '李四',
    // })

    // 方式三：更好的批量更新的方式（推荐）
    // useUserStore.$patch((state) => {
    // 	state.name = '李四'
    // 	state.people.parent.dad = 'haha666'
    // 	state.people.parent.mom = 'lili666'
    // 	state.people.age = 88
    // })

    // 方式四：通过 actions 修改 state（更推荐）
    // useUserStore.updateName('李四')
    const obj = {
        name: '李四',
        people: {
            age: 88,
            parent: {
                dad: 'haha666',
                mom: 'lili666',
            },
        },
    }
    updateName(obj)
}
</script>

<style scoped lang="scss">
.top {
    width: 100%;
    height: 80px;
    line-height: 80px;
    background: pink;
    h1 {
        color: red;
    }
}
</style>