PropEmit和pinia

一，PropEmit父子组件传通信

例子：想在登录框中上方出现用户登录这四个大字

此时我们就可以用到PropEmit父子组件

我们在component和pages分别有login和Login的Vue文件（图片如下）

https://download.tooc.xlj0.com/uploads/179/%E5%89%8D%E7%AB%AF/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202023-10-07%20204957.png

首先在login就是子组件

//首先写下prop组件
const props = defineProps<{msg:string}>();//类型是String
//接着需要解包msg
const {msg="default"} = toRefs(props);//torefs时用来转换成ref类型用于响应式
//接着在<template></template>
在一个标头中写{{msg}}
//{{}}这个是插值表达式

//接着需要将ref，toRefs导入
import {ref,h,toRefs} from "vue";

接着是Login就是父组件

已经在login的子组件首先是搭建好

我们就可以在Login进行操作了

//在<login></login>标签中
//在<login>标签中“
<login:msg = "用户登录"> //l是小写。然后我们就可以看到在用户界面上方会有用户登陆

但是在我们一般不是想吧一个值给写死，所以我们通过响应式操作来

//在<script>的标签中
import {ref} from "vue";
const info = ref("用户登录");
//接着在<login>的标签中
<login:msg = info>

我们在登录的页面我们会看到会有一个清空的按钮。

这是一个事件所以我们需要有时间来描述

//在login（l是小写）的vue文件
//定义一个emit事件，
const emit = defineEmits(["clear"]);
//接着我们需要给clear这个事件进行补充
const clear =()=>{//将输入框的数字变空
	input.value = "";
	password.value = "";
	emit("clear","the string is cleared");
};

然后我们可以就需要在父组件进行操作

//在login的标签进行操作
<login:msg=info @clear="sonSetInfo">
//所以我们需要创建sonSetInfo
const sonSetInfo = (value:string)=>{
	sonInfo.value = value;
	alert(sonInfo.value);
};

这样进行当我们点登录窗口的时候点击清空那么就会清空

总结一下父子组件通信：需要在子组件定义好想要的数据和变量，父组件就是通过这个属性进行传递，然后父组件状态得到渲染，然后给到子组件，状态改变进行渲染。

二，Pinia变量全局存储

Pinal的官方文档 https://pinia.vuejs.org/zh/

首先我们需要安装Pinia的包

npm/cnpm/pnpm install pinia

然后再main.ts中添加

// main.ts


import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
const pinia = createPinia();


const app = createApp(App);
app.use(pinia);
app.mount("#app");

就是import什么，我们下面就需要用app.use()来进行挂载。

接着在src目录下新建store文件夹,并且创建index.ts的文件

需要在store下文件创建后需要有以下操作

//引入仓库插件
import {defineStore} from 'pinia'
//定义仓库名字，比如是Loginstore.ts的文件,就创建和名字相同的仓库名字
const loginStore = defineStore(  
    "login",  
    () => {  
       const loginSession = ref(false);  
       const setLogin = (loginNewSession: boolean) => {  
          loginSession.value = loginNewSession;  
       };  
  
       return {  
          loginSession,  
          setLogin,  
       };  
    },  
    {  
       persist: true,  //这个是进行持久化hook
    }  
);
//需要全局使用，
export default loginStore;

关于在main.ts中router和pinia的优先问题

因为在main.ts中，注册router总比pinia先，所以不能使用到store/index.js文件中createPinia方法，只能在router文件中再createPinia一次，才能使用到pinia,所以需要进行手动挂载

//在router中
import pinia from "../store";
import loginstore from "../store/loginstore.ts";
import {storeToRefs} from "pinia";
const loginstore = loginStore(pinia);
const {loginSession} = storeToRefs(loginstore);

另外就是关于持久化数据的store，就是说如果你登陆之后退出后需要不重新进入，那么就是用持节化hook

Home | pinia-plugin-persistedstate (prazdevs.github.io)

pnpm i pinia-plugin-persistedstate//安装
//将插件添加到index.ts
import { createPinia } from 'pinia' 
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' 
const pinia = createPinia() 
pinia.use(piniaPluginPersistedstate)

然后加一个presist：true。在上方的案例有写。