Pinia作用类似于C#的一个类,里面可以放字段属性,方法
使用步骤
1、安装依赖 npm i pinia
2、创建/store/UserInfo.ts
import { defineStore } from 'pinia' export const useUserInfoStore = defineStore('UserInfo', { state: () => { return { //字段属性 age: 18, name: 'LuoFenMing', data:['a','b','c'] } }, actions: { //方法 update(a:number,name:string,data:any) { this.age=a this.name='LuoFenMing' this.data=['q','w','e'] } } })
3、在main.ts里面引用并使用pinia
import './assets/main.css' import {createPinia} from 'pinia' import { createApp } from 'vue' import App from './App.vue' const app=createApp(App) const pinia=createPinia() app.use(pinia) app.mount('#app')
4、在组件里面使用
<template> <div> <p>{{ userInfoStore.name }}</p> <p>{{ userInfoStore.data }}</p> <p>{{ userInfoStore.age }}</p> <button @click="updateUserInfo">修改</button> </div> </template> <script setup lang="ts"> import { useUserInfoStore } from '@/store/UserInfo'; const userInfoStore = useUserInfoStore(); function updateUserInfo() { //修改数据 方法1 // userInfoStore.name ='罗分明'//修改 // userInfoStore.data.push('e')//向数组里面添加数据 // userInfoStore.age++ //修改数据 方法2 如果同时修改整个对象 建议那方法2,它是一次性修改整个对象,方法1要执行三次 // userInfoStore.$patch({ // name: '罗分明', // age: 1, // data:['f','g','h'] // }) //UserInfo.ts里面定义一个方法修改 方法3 userInfoStore.update(19, '罗分明', ['a', 's', 'd']) } </script>
本文来自 www.luofenming.com