vue3使用Pinia

- pinia简介
- Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态
- Pinia 适用于 Vue 2 和 Vue 3 ，并且不需要你使用组合API

-  为什么使用pinia?
-  Pinia 修改数据更方便
-  Pinia 仓库数据具有缓存
-  Pinia 只包含 state getters action 更小巧
-  Pinia 编译速度更快
-  Pinia 对ts的支持更也友好
-  Pinia 和vuex是同一团队
-  Pinia 支持vue2和vue3

一.	使用方式
	 - yarn add Pinia  
	 - npm install Pinia
二. (1)如何使用Pinia
	根目录创建store文件夹，并添加index.js或者ts文件
	来main.js
	import { createPinia } from 'pinia'
	const pinia = createPinia()
	createApp(App).use(pinia).mount('#app')
	---全局引入pinia
	(2)回到store
	import { defineStore } from "pinia"
	export const mainStore = defineStore({
		// 定义数据的地方
		state:()=>{
			counter:1,
			name:'Eduardo'，
			phone: '13342331233'
		}，
		 // 这个actions和以前的不同，这个是为了当前项目过大，所使用的
    actions: {
        changeCount() {
            this.counter++;
            this.name = 'gq'
        }
    },
    // pinia的 getters 和以前不同，🙅‍♂️是返回数据用的
    // 而是类似于 vue 中的计算属性
    getters: {
        // 可以传递state,或者用this代替
        phoneHidden() {
            return this.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')
        }
  	  }
	})
	(3)使用stroe中的数据
	<template>
	  <div>{{ store.counter }}</div>
  	  <div>{{ store.name }}</div>
	</template>
   <script  setup>
	import { mainStore } from "../../store/index";
    let store = mainStore();
   </script>
   ---- 以上的实例你就使用store中的数据了，在<template>中使用
   ---- 使用store这种不太方便，所以
   import { storeToRefs } from "pinia";
   const { counter, name, phoneHidden } = storeToRefs(store);
   // 解释为啥要有storeToRefs 如果这个方法，修改的时候，将不是响应式的
  (4)修改store中的数据
  <template>
	  <div>
	    <div>{{ store.counter }}</div>
	    <div>{{ store.name }}</div>
	    <hr />
	    <div>{{ counter }}</div>
	    <button @click="modifay">直接修改</button>
	     button @click="modifaSate">对象方式修改</button>
	    <button @click="modifyMethod">方法修改</button>
	    <button @click="modifyByFn">复杂修改</button>
	     <div>
	      <h1>{{ phoneHidden }}</h1>
	    </div>
	    <button @click="changeGetters">修改getters</button>
	 </div>
</template>
<script  setup>
	import { mainStore } from "../../store/index";
    let store = mainStore();
   import { storeToRefs } from "pinia";
   const { counter, name, phoneHidden } = storeToRefs(store);
   // 不要在派发任务直接修改
	const modifay = () => {
	  store.counter++;
	};
	// 可以通过传递对象方式修改
	const modifaSate = () => {
	  store.$patch({
	    counter: store.counter + 2,
	    name: "gq",
	  });
	};
	// 方法修改 ,复杂逻辑
	const modifyMethod = () => {
	  store.counter++;
	  store.$patch((state) => {
	    if (store.counter === 5) {
	      alert("1");
	    }
	  });
	};
	// 超级难的业务逻辑  将对应逻辑写actions中 直接触发
	const modifyByFn = () => {
	  store.changeCount();
	};
	// getters 具有缓存
	const changeGetters = () => {
	  store.phone = "13342112222";
	};
</script>