Vue3中怎么引入Pinia存储库并使用

yarn add pinia# 或者使用 npmnpm install pinia

import { createApp } from 'vue'import App from './App.vue' const app=createApp(App)import { createPinia } from 'pinia' //引入piniaapp.use(createPinia()) app.mount('#app')

import { defineStore } from 'pinia' //引入pinia //这里官网是单独导出  是可以写成默认导出的  官方的解释为大家一起约定仓库用use打头的单词 固定统一小仓库的名字不易混乱export const useCar=defineStore("test",{     state: () =>{        return  ({            msg:"这是pinia",            name:"小小",            age:18            }) //为了避免出错，返回的值用()包起来    } })

<template>    <h2>{{store.msg}}{{store.name}}{{store.age}}</h2>    <button @click="modify">修改store.name</button></template> <script>import { defineComponent, ref } from 'vue';import {  reactive,  toRefs,  onMounted,  onActivated} from "vue";import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入export default defineComponent({  let store=useCar() //接收  setup() {    const state = reactive({      testMsg: "原始值",    });    onMounted(async () => {});    onActivated(() => {})    const methods = {        modify(){             store.name = state.testMsg //修改pinia里面的数据             console.log(store.name)        }    };    return {      ...toRefs(state),      ...methods,    };  }})</script>

<template>    <h2>{{store.msg}}{{store.name}}{{store.age}}</h2>    <button @click="reset">重置store.name</button></template> <script>import { defineComponent, ref } from 'vue';import {  reactive,  toRefs,  onMounted,  onActivated} from "vue";import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入export default defineComponent({  let store=useCar() //接收  setup() {    const state = reactive({      testMsg: "原始值",    });    onMounted(async () => {});    onActivated(() => {})    const methods = {        reset(){             store.$reset() //重置pinia里面的数据             console.log(store.name)        }    };    return {      ...toRefs(state),      ...methods,    };  }})</script>

<template>    <h2>{{store.msg}}{{store.name}}{{store.age}}</h2>    <button @click="modify">修改store.name</button>    <button @click="reset">重置store.name</button>    <button @click="allModify">群体修改store.name</button></template> <script>import { defineComponent, ref } from 'vue';import {  reactive,  toRefs,  onMounted,  onActivated} from "vue";import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入export default defineComponent({  let store=useCar() //接收  setup() {    const state = reactive({      testMsg: "原始值",    });    onMounted(async () => {});    onActivated(() => {})    const methods = {        modify(){             store.name = state.testMsg //修改pinia里面的数据             console.log(store.name)        },        reset(){             store.$reset() //重置pinia里面的数据             console.log(store.name)        },        allModify(){             store.$patch({              name:"花花",              age:20,            })        }    };    return {      ...toRefs(state),      ...methods,    };  }})</script>

//可以通过 store 的 $subscribe() 方法查看状态及其变化,通过patch修改状态时就会触发一次store.$subscribe((mutation, state) => {   // 每当它发生变化时，将整个状态持久化到本地存储  localStorage.setItem('hello', JSON.stringify(state))})

//store/index.js文件export const useStore = defineStore('main', {  state: () => ({    counter: 0,  }),  getters: {    doubleCount: (state) => state.counter * 2,  },}) //组件中直接使用:  <p>Double count is {{ store.doubleCount }}</p>

export const useStore = defineStore('main', {  state: () => ({    counter: 0,  }),  actions: {    increment() {      this.counter++//1.有this    },    randomizeCounter(state) {//2.有参数   想用哪个用哪个      state.counter = Math.round(100 * Math.random())    },    randomizeCounter(state) {        //异步函数.接口成功赋值     ajax.hplBaseApi("app/productSelection/categoryRows", {}, "post").then((res) => {        state.counter = res.data.length     });    }  },}) //组件中的使用:  setup() {    const store = useStore()    store.increment()    store.randomizeCounter()  }