vue3-回顾之，状态管理神器 大菠萝- pinia

1.使用 pinia

pnpm i pinia

2.按照工程化目录创建store

import {
    defineStore } from 'pinia';
interface stu {
   
    name: string,
    age: number
}
const  userNumStore=defineStore('numStore',{
   
    //选项api
    actions:{
   
        add(val:number){
   
           this.num=this.num+val
        }

    },
    state() {
   
        return{
   
            num:23,
            stu:{
   
                name:'王祥林',
                age:20

            }

        }
    },

    getters:{
   
        sumNum(state){
   
          return state.num*100+90
        },

        stuInfo():stu{
   
            return this.stu
        }
    }

})

export {
   userNumStore}

3.main.ts中配置大菠萝

import {
    createPinia } from 'pinia'

app.use(createPinia())

4、view层使用

import {
    userNumStore } from "../store/count";

import {
    storeToRefs } from "pinia";

const userNum = userNumStore();

//结构出来的具有响应式
// let { num, stu, stuInfo, sumNum } = storeToRefs(userNum);

let {
    num, stu } = storeToRefs(userNum);

以上是选项式写法

5.下面组合式使用

import {
    ref } from 'vue'

export const userNumStore = defineStore('numStore', () => {
   

    let num = ref(100)

    let stu = ref({
   
        name: '王祥林',
        age: 20

    })
    const add = (val: number) => {
   
        num.value += val + num.value
    }

    return {
    add, num, stu }
})