huahuibao_document/front_end/登录与数据保存/mallApp/登录函数与登录信息保存.md

关键 js 代码

import { mapGetters } from 'vuex'

export default {
	......
	computed: {
		...mapGetters({ loginInfo: "getLoginInfo" })
	},
}

...mapGetters 是 Vuex 的辅助函数，用于将 store 中的 getter 映射到组件的计算属性中。这里将 store 中名为 "getLoginInfo" 的 getter 映射为组件中名为 loginInfo 的计算属性。这样可以直接通过 this.loginInfo 访问 store 中的登录信息，而不需要写 this.$store.getters.getLoginInfo。

原因：这样做可以简化代码，提高可读性和可维护性。

Vuex 功能实现都在每个项目的 store 目录下。store/index.js 内容如下：

这是一个 Vuex store 的主配置文件,主要功能如下:

1. 基础设置:

   • 导入 Vue 和 Vuex
   • 注册 Vuex 插件
   • 导入模块化的 store 配置

2. 全局状态:

   • allOptions: 存储全局选项数据

3. getters:

   • allOptions: 获取选项数据,如果 state 中没有则从本地存储获取

4. mutations:

   • setAllOptions: 更新选项数据并同步到本地存储

5. actions:

   • getAllOptions: 调用 API 获取选项数据(包括预算、装修类型、派单状态等),成功后通过 mutation 更新状态

这是一个典型的 Vuex 状态管理配置,主要用于管理全局的选项数据,并支持数据持久化存储。

包含 setLoginInfo 函数的文件有：

• /Users/shishao/dnmp/www/front-end/mallApp/src/components/wangCg.vue

• /Users/shishao/dnmp/www/front-end/mallApp/src/pages/login/account.vue

• /Users/shishao/dnmp/www/front-end/mallApp/src/pages/login/index.vue

• /Users/shishao/dnmp/www/front-end/mallApp/src/utils/auth.js ![[Pasted image 20250815144731.png]]