在Vue3中使用vuex

Vuex 简介

Vuex 是 Vue.js 官方的状态管理库，帮助我们在中大型应用中集中管理组件间的共享状态。它通过 state、getters、mutations 和 actions 实现响应式数据管理

Vuex 核心概念

• State: 全局状态，存储应用的核心数据。
• Getters: 类似于组件中的计算属性，用于从 state 中派生出新的数据。
• Mutations: 修改 state 的唯一方式，必须是同步操作。
• Actions: 用于处理异步逻辑，最终通过 commit 触发 mutations 来改变 state

使用案例

在这个案例中，我们将构建一个权限管理的场景。不同的用户角色会拥有不同的权限，基于这些权限，前端界面会展示或隐藏相应的按钮。

1、 Vuex Store (权限管理模块)

import { getComponentList } from '@/api/Component';

export default {
  namespaced: true,
  state: () => ({
    componentPermissions: {}  // 存储各个页面的权限列表
  }),
  getters: {
    getPermissionByKey: (state) => (key) => {
      return state.componentPermissions[key] || {};  // 根据页面名称获取权限
    }
  },
  mutations: {
    setPermission(state, { key, permissions }) {
      state.componentPermissions = {
        ...state.componentPermissions,
        [key]: permissions
      };
    }
  },
  actions: {
    async fetchPermissions({ commit }, key) {
      const response = await getComponentList({ name: key });
      if (response.data.code === 2000) {
        commit('setPermission', { key, permissions: response.data.data });
      }
    }
  }
};

• State: componentPermissions 保存每个页面的权限列表，以页面 key 作为字段名。
• Mutations: setPermission 用于更新权限。
• Actions: fetchPermissions 处理异步请求，获取权限数据并存入 state。
• Getters: getPermissionByKey 根据页面名称获取对应的权限。

2、在组件中使用 Vuex 权限管理

我们在组件中先从 Vuex 获取权限列表，如果权限不存在，则调用 fetchPermissions

<template>
  <div>
    <div v-show="canShowNewPlanButton" class="button-container">
      <a-button type="primary" @click="showPointPlanAddModal">新建计划</a-button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';

const canShowNewPlanButton = ref(false);  // 控制按钮显示状态
const store = useStore();
const route = useRoute();

// 在组件加载时根据权限展示按钮
onMounted(async () => {
  const key = route.name;
  
  // 从 Vuex 获取权限
  const permissions = store.getters['permission/getPermissionByKey'](key);

  // 如果权限已经存在则直接赋值，不存在则调接口
  if (permissions.new_plan !== undefined) {
    canShowNewPlanButton.value = permissions.new_plan;
  } else {
    await store.dispatch('permission/fetchPermissions', key);
    const updatedPermissions = store.getters['permission/getPermissionByKey'](key);
    canShowNewPlanButton.value = updatedPermissions.new_plan;
  }
});
</script>

总结

• 组件内使用 useStore 和 useRoute: 我们通过 useStore 获取 Vuex 实例，通过 useRoute 获取当前页面的路由信息，用于匹配对应的权限。
• 权限获取逻辑:
  • 先从 Vuex 的 getters 中获取对应页面的权限数据。
  • 如果 Vuex 中没有权限数据，调用 fetchPermissions 异步获取数据，并更新 Vuex 状态。
  • 根据权限的 new_plan 字段决定是否展示按钮。