shizhongqi/huahuibao_document @ 478b66f625fd85b8a1480d94bd2381367ec3d758

我来为您详细解释这几个代码块之间的关系与运行机制。 Ran tool Read file: mallApp/src/store/modules/vuexStorange.js 现在我来详细解释这几个代码块之间的关系与运行机制：

代码结构与关系图

main.js (应用入口)
   ↓
store/index.js (Vuex 主 Store)
   ↓
store/modules/ (各功能模块)
   ├── user.js (用户模块)
   ├── login.js (登录模块)
   └── ... (其他模块)
   ↓
pages/home/recent.vue (页面组件)

详细运行机制

1. 应用初始化阶段

import store from './store'
Vue.prototype.$store = store

在应用启动时，main.js 导入 Vuex store
将 store 实例挂载到 Vue 原型上，使所有组件都能通过 this.$store 访问

2. Store 架构设计

const store = new Vuex.Store({
	modules,
	state: {
		allOptions: ''
	},
	getters: {
		allOptions: state => state.allOptions ||
		 (util.isEmpty(uni.getStorageSync('allOptions')) ? {} : JSON.parse(uni.getStorageSync('allOptions')))
	},
	mutations: {
		// 全局选项
		setAllOptions(state, data = {}) {
			  state.allOptions = data
			  uni.setStorageSync('allOptions', JSON.stringify(data))
		}
	  },
	actions: {
		getAllOptions({ commit }) {
			// sysBudgetStatus 预算   sysRenovationStatus 装修类型  sysBookingStatus 派单状态
			return getOptions({
				type: ''
			}).then((res) => {
				if (res.status === 'success') {
					commit('setAllOptions', res.data)
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none'
					})
				}
			})
		}
	}
})

核心特点：

采用模块化架构，通过 modules 导入各功能模块
根级 state 存储全局配置选项 (allOptions)
持久化存储：数据同时存储在内存和 uni.getStorageSync 中

3. 模块化管理

各模块独立管理各自的状态：

用户模块 (user.js)：

getUser: (state) => {
	getState(state, 'user', 'userInfo')
	return state.user
},

登录模块 (login.js)：

getLoginInfo(state) {
	return state.loginInfo || {}
},

4. 持久化机制

通过 vuexStorange.js 实现数据持久化：

export function getState(state, stateName, name) {
	if (process.env.NODE_ENV == 'development' && !state[stateName]) {
		let userInfo = uni.getStorageSync(name)
		if (userInfo) {
			state[stateName] = JSON.parse(userInfo)
		}
	}
}
export function setState(state, userInfo, stateName, name) {
	if (process.env.NODE_ENV == 'development') {
		uni.setStorageSync(name, JSON.stringify(userInfo))
	}
	state[stateName] = userInfo
}

特点：

开发环境专用：只在开发环境进行持久化
自动恢复：页面刷新后从本地存储恢复数据
双重存储：内存 + 本地存储

5. 组件中的使用

import { mapGetters } from 'vuex'

computed: {
  ...mapGetters({ userInfo: "getUser",loginInfo:"getLoginInfo" })
},

数据流向：

组件通过 mapGetters 映射 store 中的 getters
getUser 来自 user 模块
getLoginInfo 来自 login 模块
组件可以直接使用 this.userInfo 和 this.loginInfo

完整的数据流转过程

1. 应用启动
   main.js → 初始化 store → 挂载到 Vue 原型

2. 数据获取
   getter 调用 → 检查内存状态 → 如果为空则从本地存储恢复

3. 数据更新
   action → mutation → 更新内存状态 → 同步到本地存储

4. 组件使用
   mapGetters → 响应式获取状态 → 自动更新视图

设计优势

模块化：各功能独立，便于维护
持久化：开发环境数据不丢失，提升调试体验
响应式：状态变化自动同步到组件
类型安全：通过 getter 统一访问接口
跨平台：使用 uni-app API，支持小程序、H5、App

这种架构非常适合 uni-app 项目的状态管理需求，既保证了数据的一致性，又提供了良好的开发体验。

store 代码说明.md 4.1 KB History Raw