pinia等同于Vuex5.0。

1、package.json

添加依赖：

"dependencies": {
    "vue": "^3.2.37",
    "pinia": "^2.0.17"
  }

然后在项目工程中执行命令：

npm install

2、main.js

import { createPinia } from 'pinia';
createApp(App).use(createPinia()).mount('#app');

3、定义store

src/store/store.ts

import {defineStore} from "pinia";
export const useMainStore =  defineStore('main', {
    state:() => {//state必须是箭头函数
      return {
        count: 10,
        name: 'myname',
        arrayDemo: [1,2,3],
      }
    },
    getters:{
      countNew(state): number {
        return this.count + 10;
      }
    },
    actions: {
       changeState(num: number,str: string){   //不要使用箭头函数定义action,因为箭头函数绑定外部this
         this.count += num     
         this.name += str
         this.arr.push(5)          
         // this.$patch({})或this.$patch(state=>{})    //还可通过$patch修改state的数据
       }
    }
});

4、在组件中使用store

<script setup lang="ts">
import { useMainStore } from "../../store/store.ts"; //引入store.ts文件
import { storeToRefs } from 'pinia'; //引入
import dayjs from 'dayjs';
import { reactive } from "vue";
import axios from 'axios';

const formState = reactive({
  username: '',
  password: '',
  remember: true,
  nowTime: dayjs('2022-07-28 13:01:01', 'YYYY-MM-DD HH:mm:ss')
});
const onFinish = (values: any) => {
  debugger;
  values.nowTime = values.nowTime.format("YYYY-MM-DD HH:mm:ss");
  axios.post("/api/hellodemo/sayHello.do", values).then(resp => {
    console.log("ajax success", resp);
  }).catch(err => {
    console.log("ajax error", err);
  });
  console.log('Success:', values);
};
const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

const mainStore = useMainStore();
const {count,name,arrayDemo,count10} = storeToRefs(mainStore);//数据响应式
function changeNum() {
  mainStore.count++;            //1、直接访问
  mainStore.$patch({           //2、用$patch方法修改多个数据
      count:mainStore.count + 1,
      name:mainStore.name + '!',
      arrayDemo:[...mainStore.arrayDemo,4]
  })         
  mainStore.$patch((state: any)=>{          //3、$patch函数会批量更新，注意传入参数必须state
      state.count++,
      state.name += '哈哈哈',
      state.arrayDemo.push(5)
  });
  mainStore.changeState(10,'demo new name');   //法4：逻辑比较多时调用action修改store中的值
}
</script>
<script lang="ts">
export default {
  name: "Welcome"
}
</script>

<template>
<div>
  <h1>系统首页</h1>
  <hr>
  <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 8 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
    <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名！' }]">
      <a-input v-model:value="formState.username" />
    </a-form-item>
    <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入用户名！' }]">
      <a-input-password v-model:value="formState.password" />
    </a-form-item>
    <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 8 }">
      <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
    </a-form-item>
    <a-form-item label="登录时间" name="nowTime" :rules="[{ required: true, message: '请选择登录时间！' }]">
      <a-date-picker show-time v-model:value="formState.nowTime" />
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" @click="changeNum">测试pinia</a-button>
    </a-form-item>
  </a-form>
  {{mainStore.count}}-------------{{mainStore.name}}---------------{{mainStore.arrayDemo}}--------{{mainStore.countNew}}
</div>
</template>
<style scoped>
h1 {
  text-align: center;
  color: red;
}
.ant-picker {
  width: 100%;
}
</style>