前言
根据这篇文章你能获得什么
- 认识Pinia
- pinia的使用方法
- pinia的原理
认识Pinia
我们认识一个朋友无非就是，你谁啊，你干啥的，你对我有什么好处
A：那Pinia是谁，
B：是一个状态管理工具
B：那Pinia能干啥，
B：能让两个互不相关的组件之间可以进行通信，就是用于多个组件共享状态
A：啊？我啥值需要全局获取啊
B：你说呢，你登录状态的token在页面上随时获取怎么搞？
你购物车里面的东西在每个页面都有个小提示，说加购了多少件，你怎么获取？
我劝你用Pinia
A：我用本地存储啊
B：我一口盐汽水....
那我们设想有这样一种场景，我在同一个页面引入两个不同的组件，这两个组件拥有同一个数据
就按照你说的是本地存储来获取这个数据，那我在本页面对这个数据进行了处理，
这两个组件的数据会进行改变吗？
A：嗯......我猜
B：实践出真知，你猜什么猜，猜我猜你猜不猜
我们进行场景代码的一个带入，由我梅九给大家写写代码啊
首先我在app.vue当中引入两个组件，这两个组件的代码是相同的
app.vue
<template>
<div>
<Package1 />
<Package2 />
</div>
</template>
<script setup>
import Package1 from "./components/Package1.vue"
import Package2 from "./components/Package2.vue"
</script>
我在本地存储了一个msg的字段，字符串“你瞅啥”
Package1.vue
<template>
<div>
<p>{{msg}}</p>
</div>
</template>
<script setup>
import {ref} from "vue";
const msg=ref(localStorage.getItem('msg'));
</script>
显示出来的结果就是
我在app.vue里面加入了一个时间函数，在3秒时候，让本地数据进行变化
setTimeout(() => {
localStorage.setItem("msg","瞅你咋的")
}, 3000);
3秒之后，最后的结果
本地数据修改了，但是页面组件是不是还未变动，那现在大家能明白为啥不用本地存储了吗
因为不能实时的更新数据
那我们现在回忆一下Pinia是做什么的
是状态管理工具，用于多个组件共享状态时候，可以在数据改变的时候可以在任何组件当中响应变化
pinia的安装和使用方法
安装npm i pinia
安装完成之后，在main.js中全局挂载
import { createPinia } from 'pinia'
createApp(App).use(createPinia())
封装一个pinia，在src文件夹下store/useStore.js
import {defineStore} from "pinia";
export const useStore=defineStore("main",{
state:()=>{
return {current:1}
},//共享的数据
getters:{
newCurrent(){
return `${this.current}`
}
},// 计算属性，修饰一些值
actions:{
setCurrent(){
this.current++;
},
},//设置值
})
在页面中获取以及设置
<script setup>
import {useStore} from "./store/useStore"
const test=useStore()
const change=()=>{
test.setCurrent(789) //这是修改值current
}
</script>
<template>
<div>
{{test.current}} <!-- 这是获取name值 -->
</div>
</template>
pinia的原理
原理要从源码分析，源码在网上有很多这里我就不贴了，
源码干了什么事情呢，
第一步：创建pinia实例对象，在实例化对象里面有两个方法，install和use
第二步：vue3中，install方法设置了全局属性，确保每个组件都能通过this.$pinia进行访问
第三步：use方法是pinia对外暴露的插件注册方法
