概述

EBAOZU 系统的后台管理端（view/admin）与移动端（view/uniapp）均基于 Vue 2.x 技术栈开发，采用 Vuex 进行全局状态集中管理。本文档介绍两端的前端状态管理结构与开发规范。

---

平台后台状态管理 (view/admin)

目录结构

view/admin/src/store/
├── index.js              # Vuex Store 入口文件
├── getters.js            # 全局 Getters 汇总
└── modules/              # 模块化 Store 目录
    ├── admin/            # 后台系统状态（菜单、标签页、全屏等）
    │   ├── db.js         # 本地持久化存储封装
    │   ├── layout.js     # 布局配置状态
    │   ├── menu.js       # 动态路由与侧边栏菜单状态
    │   ├── page.js       # 多标签页导航状态
    │   └── theme.js      # 主题配色状态
    ├── user.js           # 管理员登录状态与个人信息
    └── ...

Store 模块定义示例

// view/admin/src/store/modules/user.js

const state = {
  token: '',
  userInfo: null,
  roles: []
};

const mutations = {
  SET_TOKEN(state, token) {
    state.token = token;
  },
  SET_USER_INFO(state, userInfo) {
    state.userInfo = userInfo;
  },
  SET_ROLES(state, roles) {
    state.roles = roles;
  }
};

const actions = {
  // 登录并保存状态
  async login({ commit }, loginData) {
    commit('SET_TOKEN', loginData.token);
    commit('SET_USER_INFO', loginData.admin);
  },

  // 退出登录并清除状态
  async logout({ commit }) {
    commit('SET_TOKEN', '');
    commit('SET_USER_INFO', null);
    commit('SET_ROLES', []);
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};

组件中使用 Vuex

<template>
  <div class="user-profile">
    <span>当前登录账号：{{ userInfo ? userInfo.account : '未登录' }}</span>
    <button @click="handleLogout">退出登录</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'UserProfile',
  computed: {
    ...mapState('user', ['userInfo'])
  },
  methods: {
    ...mapActions('user', ['logout']),
    async handleLogout() {
      await this.logout();
      this.$router.push('/login');
    }
  }
};
</script>

---

移动端状态管理 (view/uniapp)

目录结构

view/uniapp/store/
├── index.js              # Store 入口
├── getters.js            # 全局 Getters（如 isLogin, token 等）
└── modules/              # 模块化 Store
    ├── app.js            # 应用全局状态（网络状态、设备信息、主题色）
    └── ...

Uni-app 状态定义与本地缓存协同

// view/uniapp/store/modules/app.js
import Cache from '@/utils/cache';

const state = {
  token: Cache.get('LOGIN_STATUS_TOKEN') || '',
  userInfo: Cache.get('USER_INFO') || null,
  homeActive: 0
};

const mutations = {
  SET_TOKEN(state, token) {
    state.token = token;
    Cache.set('LOGIN_STATUS_TOKEN', token);
  },
  SET_USERINFO(state, userInfo) {
    state.userInfo = userInfo;
    Cache.set('USER_INFO', userInfo);
  },
  LOGOUT(state) {
    state.token = '';
    state.userInfo = null;
    Cache.clear('LOGIN_STATUS_TOKEN');
    Cache.clear('USER_INFO');
  }
};

const actions = {
  setUserInfo({ commit }, userInfo) {
    commit('SET_USERINFO', userInfo);
  }
};

export default {
  state,
  mutations,
  actions
};

页面中使用

<template>
  <view class="user-container">
    <view v-if="isLogin">
      <text>{{ userInfo.nickname }}</text>
    </view>
    <view v-else @tap="toLogin">
      <text>点击登录</text>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['isLogin', 'userInfo'])
  },
  methods: {
    toLogin() {
      uni.navigateTo({ url: '/pages/users/login/index' });
    }
  }
};
</script>

---

二开规范

1. 模块化设计：新功能涉及全局跨页面共享数据时，必须在 store/modules/ 下创建独立的模块文件并开启 namespaced: true。
2. 异步操作放入 Actions：调用接口或异步操作必须在 actions 中执行，mutations 中只做纯同步状态变更。
3. 缓存同步：涉及登录凭据（Token）、用户信息等持久化状态，必须与本地 Storage 同步，防止页面刷新后状态丢失。