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

本文主要是介绍vue3-回顾之，状态管理神器 大菠萝- pinia，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.使用 pinia

pnpm i pinia

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

import { defineStore } from 'pinia';
interface stu {name: string,age: number
}
const  userNumStore=defineStore('numStore',{//选项apiactions:{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 }
})

这篇关于vue3-回顾之，状态管理神器 大菠萝- pinia的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---