pinia的基本使用

使用场景，例如我在一个父组件中显示了两个数据，子组件中可以对这个数据进行修改，那么子组件修改了以后，如何实现父组件显示的数据立刻也修改呢，这个时候就用到了pinia，我们可以把获取数据的操作放在pinia中，它的底层使用reactive修改的，所以通过它获取的数据都是响应式的，子组件获取到pinia中的数据，对它修改，那么父组件中引用了这个响应式数据，就可以实现组件间数据的共享，见如下

1. 安装pinia?

?npm i pinia

? ? ?2.全局引入pinia?

?

import ?{createPinia} ? from ?'pinia'

app.use(createPinia())

3.在src下创建一个store文件夹，用来存储组件共享的数据对象，创建一个共享ts文件

import  {defineStore} from 'pinia'

//返回的是一个函数
export let useInfo=defineStore('userInfo',{
    state:()=>{
        return {name:'wanglibin',age:12}
    },
    actions:{
        get(传的参数){
         //从后端获取的数据
         Object.assign(this,后端拿到的数据)
        },
        update(可传参数){
         //修改共享数据的时候调用
         Object.assign(this,修改传过来的的数据)
        }
        
    }
})

4.那么我们在使用的时候引入该ts文件中暴露的函数即可

import {useInfo}  from '../store/UserInfo'

import  {  onMounted } from 'vue';

let userInfo=useInfo();

onMounted(()=>{
  //获取最新的数据
  userInfo.get();
})

5.修改的时候，也是同样获取到对应的对象，调用对应的修改方法即可

  import  {ref, type CSSProperties ,onMounted} from 'vue';
  import  {useInfo}  from "../store/UserInfo"

  
  import {type UserInfo }  from "../types"

  let userInfoDto=ref<UserInfo>({
    name:"111",
    age:0
  })



  function update(){
    let userInfo= useInfo()
    useInfo.update(userInfoDto);
  }

?