还在用vuex?来了解一下pinia

npm install pinia

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'  //导入pinia
const  pinia = createPinia();        //调用创建pinia
createApp(App)
			.use(pinia)
			.mount('#app')

import { defineStore } from 'pinia'
export const PiniaStore = defineStore('main',{  //导出 pinia仓库
    state:() => { //相当于全局的 data()
        return {
            name:'张三',
            age:18
        }
    },
    getters:{},  //相当于全局的computed
    actions:{}   //相当于全局methods
})

<template>
    <h3>{{pinia.name}}</h3>  <!--使用-->
    <h3>{{pinia.age}}</h3>
    <button @click="pinia.age++">修改pinia数据</button>   <!--修改-->
</template>
<script setup>
    import { PiniaStore } from '../../store/pinia'
    const pinia = PiniaStore();
</script>

<template>
	<div>
       <h3>{{pinia.name}}</h3>
       <h3>{{pinia.age}}</h3>
       <button @click="pinia.age++">修改pinia数据</button>
    </div>
</template>
<script>
    import { PiniaStore } from '../../store/pinia'
    export default {
			created(){const pinia = PiniaStore();}
	}
</script>