vue3的store使用学习

        store状态管理，用来进行组件的通信和数据运行缓存，四大组成部分分为nameSpace空间，state,mutation,去修改state的内容；action,去异步触发mutation里面的一个方法。

        参考vue3 中 store 使用getters、mutation、action_哔哩哔哩_bilibili

vue3+threejs可视化项目——搭建vue3+ts+antd路由布局（第一步）_vue3 threejs-CSDN博客

        在vue-vben-admin的项目基础上进行修改，在src/store/modules目录下添加dept.ts的store文件，保存和获取选择的id，用到了state,getters,actions.actions里添加setSelectedDept(),保存传入的id和name,getters里添加getDeptId(),getDeptName()获取id和name。

dept.ts

import { defineStore } from 'pinia';
import { store } from '/@/store';
import { CurrentDeptInfo } from '/#/store';

export const useDeptStore = defineStore({
  id: 'app-dept',
  state: (): CurrentDeptInfo => ({
    id: '',
    name: '',
  }),
  actions: {
    setSelectedDept(deptInfo: CurrentDeptInfo) {
      this.id = deptInfo.id;
      this.name = deptInfo.name;
    },
  },
  getters: {
    getDeptId(): string {
      return this.id;
    },
    getDeptName(): string {
      return this.name;
    },
  },
});
export function useDeptStoreWithOut() {
  return useDeptStore(store);
}

store.d.ts

export interface CurrentDeptInfo {
  id: string;
  name: string;
}

在页面模块引入import { useDeptStore } from '/src/store/modules/dept';将下拉框选中的选项id和名称传到store文件。在下拉框绑定的方法onChangeDept（）添加

const onChangeDept = (value) => {
        console.log('Selected department:', value);
        dept.setSelectedDept(value);
      };

将获取到的id和name通过setSelectedDept()传到store