Ruin/vue-frame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
刘引
2025-10-15 09:36:47 +08:00
parent 64e8813f35
commit fae1999a93
4 changed files with 45 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/store/index.ts
View File

@@ -1,35 +1,29 @@
/* import { createPinia } from 'pinia'
* @Author: 刘引 liu.yin.work@foxmail.com const store = createPinia()
* @Date: 2023-08-01 13:46:06 export { store }
* @LastEditors: 刘引 liu.yin.work@foxmail.com export * from './modules/user'
* @LastEditTime: 2023-08-01 15:56:19 // export let useStore = defineStore('useStore', {
* @FilePath: \kthec-emss-web\src\pinia\index.js // /**
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE // * 存储全局状态
*/ // * 1.必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染
import { defineStore } from 'pinia' // 定义容器 // * 和 TS 类型推导
// */
export let useStore = defineStore('useStore', { // state: () => {
/** // return {
* 存储全局状态 // count: 0,
* 1.必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染 // list: [1, 2, 3, 4]
* 和 TS 类型推导 // }
*/ // },
state: () => { // /**
return { // * 用来封装计算属性 有缓存功能 类似于computed
count: 0, // */
list: [1, 2, 3, 4] // getters: {},
} // /**
}, // * 编辑业务逻辑 类似于methods
/** // */
* 用来封装计算属性 有缓存功能 类似于computed // actions: {
*/ // changeData(val: number) {
getters: {}, // this.count = val + 10
/** // }
* 编辑业务逻辑 类似于methods // }
*/ // })
actions: {
changeData(val: number) {
this.count = val + 10
}
}
})

10
src/store/modules/user.ts Normal file
View File

@@ -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 }
})

14
src/views/home/components/news.vue
View File

@@ -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> <template>
<div class="root">我是home组件的子组件news</div> <div class="root">我是home组件的子组件news</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup></script>
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {
color: red; color: red;
} }
</style> </style>

8
src/views/index.vue
View File

@@ -1,14 +1,14 @@
<template> <template>
<Head></Head> <Head></Head>
<div @click="store.count++">根组件{{ store.count }}</div> <p>{{ userStore.userInfo.age }}</p>
<t-button>测试</t-button> <t-button @click="userStore.userInfo.age++">测试</t-button>
<Foot></Foot> <Foot></Foot>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, watch } from 'vue' import { reactive, onMounted, watch } from 'vue'
import { useStore } from '@/store' import { useUserStore } from '@/store'
const store = useStore() const userStore = useUserStore()
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>