Pinia的概念

具有组合式api的状态管理库，类似vuex的状态管理工具

特点

1、没有mutations,只有state、getters、actions 2、分模块不需要modules 3、体积小

安装

js
pnpm i pinia

注册使用

main.ts中注册

ts
import { createPinia } from 'pinia';

createApp(App).use(createPinia()).use(router).mount('#app');

创建stroe

通过defineStore创建, id具有全局唯一性

ts
import { defineStore } from 'pinia';

export const useStore = defineStore('id', {

});

State

说明

和vuex中的state一样都是用于存放数据状态，不同在于pinia中state的属性值为一个函数，且返回需要管理的状态

使用

OptionsStore

说明

第二个参数直接为对象

ts
import { defineStore } from 'pinia';

export const userInfoStroe = defineStore('userinfo', {
	state: () => {
		return {
			name: '',
			token: '',
		};
	},
});

Getters

说明

类比vuex中的getters，同样会根据其依赖的状态缓存

ts

import { defineStore } from 'pinia';

export const userInfoStroe = defineStore('userinfo', {
	state: () => {
		return {
			name: '',
			token: '',
		};
	},
	getters: {
        deluserinfo: (state) => {
	        state.name='';
	        state.token='';
        }
    },
});

传参

通过使其返回值为一个函数实现传参

ts
getters: {
    getUserById: (state) => {
      return (userId) => state.users.find((user) => user.id === userId)
    },
  },

注意点：此方式会使得其不再根据依赖的状态缓存结果，只是相当于调用函数

SetupStore

说明

第二个参数为函数，函数内部定义了一些响应式属性和方法，然后将其暴露出去

注意点

ref() 就是 state 属性

computed() 就是 getters
function() 就是 actions

ts
import { defineStore } from 'pinia';

export const userInfoStroe = defineStore('userinfo', {
	let userinfo = reactive({
			name: '',
			token: '',
	});

    const deluserinfo = function(){
        userinfo.name='';
        userinfo.token='';
    }

	return { userinfo, deluserinfo }
});

访问

vue
...

<script lang="ts" setup>
    import { userInfoStroe } from '../../pinia/LoginAndRegister';
    
    const userStroe = userInfoStroe();
    console.log(11, userStroe.username, userStroe.token);
</script>

Pinia模块化

说明

直接书写多个store文件，然后页面引入调用即可

解构丢失响应性

说明

在.vue组件种在使用userinfoStore()获取Store的state时，如果采用解构，则需要调用storeToRefs()将其包裹避免丢失响应式

通过插件添加的属性也会被提取为ref
并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性

EG

vue
<template>
	<div>
		<p>{{name}}</p>
		<butten @click="deluserinfo">清除</butten>
	</div>
</template>

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

const store = userinfoStore();

let { name, token } = storeToRefs(store);

// 对于`action`可以直接解构
let { deluserinfo } = store;

目录