VUE状态机Pinia

功能类似于VUEX，实现数据的跨组件调用数据包

使用步骤

1.安装pinia并引入

npm i pinia

 2.引入并调用

import {createPinia} from 'pinia' //1. 引入pinia

const pinia=createPinia()//2.创建

app.use(pinia)//3.使用pinia状态机

3.使用 

// 一个pinia状态机模块
import {defineStore} from 'pinia'
import { ref } from 'vue'
// Hook的语法风格命名，useXxx
export const useCount = defineStore('count',()=>{
    // 数据银行内部逻辑
    const num = ref(100)  //状态机数据
    return {num}
})

4.在组件中使用状态机 

//导入状态机
<script setup>
import { useCount } from '../../store/count';
const count = useCount()
</script>

//实现跨组件使用状态机的数据包
<template>
    <div class="box">
        <h2>
        这是A组件,{{ count.num }}
        </h2>
</template>