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

最新推荐文章于 2024-06-03 11:13:31 发布

江南一舟110

最新推荐文章于 2024-06-03 11:13:31 发布

阅读量486

点赞数 9

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_30519365/article/details/135306414

版权

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 }
})