Vue3 Pinia的作用和使用

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