refactor: 重构store模块化结构，新增user模块并更新相关引用

2025-10-15 09:36:47 +08:00
parent 64e8813f35
commit fae1999a93
4 changed files with 45 additions and 51 deletions
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,35 +1,29 @@
-/*
- * @Author: 刘引 liu.yin.work@foxmail.com
- * @Date: 2023-08-01 13:46:06
- * @LastEditors: 刘引 liu.yin.work@foxmail.com
- * @LastEditTime: 2023-08-01 15:56:19
- * @FilePath: \kthec-emss-web\src\pinia\index.js
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
-import { defineStore } from 'pinia' // 定义容器
-
-export let useStore = defineStore('useStore', {
-  /**
-   * 存储全局状态
-   * 1.必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染
-   * 和 TS 类型推导
-   */
-  state: () => {
-    return {
-      count: 0,
-      list: [1, 2, 3, 4]
-    }
-  },
-  /**
-   * 用来封装计算属性 有缓存功能  类似于computed
-   */
-  getters: {},
-  /**
-   * 编辑业务逻辑  类似于methods
-   */
-  actions: {
-    changeData(val: number) {
-      this.count = val + 10
-    }
-  }
-})
+import { createPinia } from 'pinia'
+const store = createPinia()
+export { store }
+export * from './modules/user'
+// export let useStore = defineStore('useStore', {
+//   /**
+//    * 存储全局状态
+//    * 1.必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染
+//    * 和 TS 类型推导
+//    */
+//   state: () => {
+//     return {
+//       count: 0,
+//       list: [1, 2, 3, 4]
+//     }
+//   },
+//   /**
+//    * 用来封装计算属性 有缓存功能  类似于computed
+//    */
+//   getters: {},
+//   /**
+//    * 编辑业务逻辑  类似于methods
+//    */
+//   actions: {
+//     changeData(val: number) {
+//       this.count = val + 10
+//     }
+//   }
+// })
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -0,0 +1,10 @@
+import { defineStore } from 'pinia'
+import { reactive } from 'vue'
+
+export const useUserStore = defineStore('useUserStore', () => {
+  const userInfo = reactive({
+    name: 'yin.liu',
+    age: 18
+  })
+  return { userInfo }
+})
--- a/src/views/home/components/news.vue
+++ b/src/views/home/components/news.vue
@@ -1,21 +1,11 @@
-<!--
- * @Description: {{ByRuin}}
- * @Version: 2.0
- * @Author: Ruin 🍭
- * @Date: 2022-03-10 10:11:16
- * @LastEditors: 刘引
- * @LastEditTime: 2022-07-26 14:42:11
-->
 <template>
  <div class="root">我是home组件的子组件news</div>
 </template>

-<script lang="ts" setup>
-
-</script>
+<script lang="ts" setup></script>

 <style lang="scss" scoped>
 .content {
  color: red;
 }
-</style>
+</style>
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,14 +1,14 @@
 <template>
  <Head></Head>
-  <div @click="store.count++">根组件{{ store.count }}</div>
-  <t-button>测试</t-button>
+  <p>{{ userStore.userInfo.age }}</p>
+  <t-button @click="userStore.userInfo.age++">测试</t-button>
  <Foot></Foot>
 </template>

 <script setup lang="ts">
 import { reactive, onMounted, watch } from 'vue'
-import { useStore } from '@/store'
-const store = useStore()
+import { useUserStore } from '@/store'
+const userStore = useUserStore()
 </script>

 <style scoped lang="scss"></style>