技术文档

打开导航菜单

PIG AI Guide

切换主题搜索

[](https://wwads.cn/click/bait)[![](https://cdn.wwads.cn/creatives/UPQhl7yG06tksqj5rkpXaQj3eAO6yA02XkpyhkoX.jpg) ](https://wwads.cn/click/bundle?code=rj1sGC1a4OL9EZHJYkOcZnZecLZrnV)

🚀 支持40+常用图表，20+主流数据源，拖拉拽制作数据大屏。开源免费，支持二开。广告

PIGX 技术指南

适配 5.0 以上单体和微服务版本

PIGX 技术指南PIG

⌘K

参与开发

快速上手

前端部分

浏览器兼容性前端配置项说明前端ENV环境配置前端目录结构前端首页组件开发前端国际化配置前端字体图标配置前端图表功能前端权限管理前端数据状态管理前端组件路由管理前端标签页管理前端字典工具使用前端参数工具使用前端通用工具函数省市区街四级联动组件前端代码编辑组件前端富文本组件前端表格组件前端表格分页组件前端表格工具栏组件前端上传组件前端左侧查询树前端文字提示组件前端悬浮输入组件前端组织架构组件前端标签列表组件前端表单校验

功能使用

后端部分

扩展必看

生产部署

社区分享

更新日志

更新日期: 2025-10-23

最后更新: 2025/8/19

切换主题

前端数据状态管理

框架中数据状态使用 vuex Module 模块化进行管理，您可能需要了解 vuex 核心概念 Module

[](#pinia)pinia

代码位置：/src/stores

[](#全局引入)全局引入

页面模块已做全局自动引入，代码位置：/@/store/index.ts。import.meta.globEager



`const modulesFiles =  import.meta.globEager("./modules/*.ts");  const pathList:  string[]  =  [];  
for  (const path in modulesFiles)  {  pathList.push(path);  }  
const modules = pathList.reduce(   (modules:  {  [x:  string]:  any  }, modulePath:  string)  =>  {   const moduleName = modulePath.replace(/^./modules/(.*).w+$/,  "$1");   const value = modulesFiles[modulePath];  modules[moduleName]  = value.default;   return modules;   },   {}  );`

[](#定义接口)定义接口

[](#1-interface-定义)1. interface 定义

/@/store/interface/index.ts，如：路由缓存列表 KeepAliveNamesState



`// 路由缓存列表  export  interface  KeepAliveNamesState  {  keepAliveNames:  Array<string>;  }`

[](#2-interface-使用)2. interface 使用

在 /@/store/modules/ 新增 keepAliveNames.ts，界面写入如下代码：注意需要开启 namespaced: true 文件名称即模块名称。(vuex Module 命名空间)



``import  {  Module  }  from  "vuex";  // 此处加上 `.ts` 后缀报错，具体原因不详  import  {  KeepAliveNamesState,  RootStateTypes  }  from  "/@/store/interface/index";  
const keepAliveNamesModule:  Module<KeepAliveNamesState,  RootStateTypes>  =  {  namespaced:  true,  state:  {  keepAliveNames:  [],   },  mutations:  {   // 设置路由缓存（name字段）   getCacheKeepAlive(state:  any, data:  Array<string>)  {  state.keepAliveNames  = data;   },   },  actions:  {   // 设置路由缓存（name字段）   async  setCacheKeepAlive({ commit }, data:  Array<string>)  {   commit("getCacheKeepAlive", data);   },   },  };  
export  default keepAliveNamesModule;``

[](#定义模块)定义模块

如上所示，我们在 /@/store/modules/ 下新增了 keepAliveNames.ts 文件，并定义了方法 mutations、actions

[](#使用模块)使用模块

[](#1-在-ts-中使用)1. 在 .ts 中使用



`import  { store }  from  "/@/store/index.ts";  
// dispatch  store.dispatch("keepAliveNames/setCacheKeepAlive", cacheList);  
// 或者 commit  // store.commit("keepAliveNames/getCacheKeepAlive", cacheList);`

[](#2-在-vue-中使用)2. 在 .vue 中使用



`<template>   <div  v-if="getThemeConfig.isLockScreen">在 .vue 中使用</div>  </template>  
<script  lang="ts">   import  { computed, defineComponent }  from  "vue";   import  { useStore }  from  "/@/store/index";   export  default  defineComponent({   name:  "app",   setup()  {   const store =  useStore();   // 获取布局配置信息   const getThemeConfig =  computed(()  =>  {   return store.state.themeConfig.themeConfig;   });   },   });  </script>`

本页导航

pinia

全局引入

定义接口

1. interface 定义

2. interface 使用

定义模块

使用模块

1. 在 .ts 中使用

2. 在 .vue 中使用

21.md 4.9 KB 永久链接 文件历史 原始文件