vue项目使用inejct+privide代替 vuex，这样做有什么弊端？

Question

问题描述

公司项目，组长没使用vuex或者 pinia
他自己想用 provide 和 inject 代替vuex
具体为 在 app.vue 提供所需的数据

然后每个子组件需要的时候通过 inject 进行注入
修改的话通过 action 进行修改
个人感觉这样是有问题的，但一时间没有想到有什么特别大的弊端

问题出现的环境背景及自己尝试过哪些方法

组长的方案是

<script lang="ts" setup>
import { RouterView } from 'vue-router';
// import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import en from 'element-plus/dist/locale/en.mjs';
import { inject, computed } from 'vue';
import { GlobalStore } from "@/utils/global.types";
import { Store } from './store';
import MPortal from './views/common/Portal.vue';
const locale = en;
const { state } = inject<Store>(GlobalStore.Message) as Store;
const token = computed(() => state.token);
</script>
<style scoped>

</style>

store

import { readonly } from "vue";
import state, { StoreState } from './state';
import actions, { StoreAction } from './actions';
import socket, { SocketIO } from '../socket';
export default {
  state: readonly(state),
  actions,
  socket,
} as Store;
export interface Store {
  state: StoreState,
  actions: StoreAction,
  socket: SocketIO
}

action

import state from "../state";
import { GlobalState, GlobalTheme } from "../state/global.state";

const actions = {
  init: () => {},
  changeToken: (value: string) => {
    state.token = value;
  },
  changeTheme: (value: GlobalTheme) => {
    state.theme = value;
  },
  changeLanguage: (value: any) => {
    state.lang = value;
  },
  login: (data: GlobalState) => {
    state.lang = data.lang;
    state.permissionMap = data.permissionMap;
    state.theme = data.theme;
    state.token = data.token;
    state.user = data.user;
    state.endUrl = data.endUrl;
  }
};
export interface StoreAction {
  init: () => void,
  changeToken: (value: string) => void,
  changeTheme: (value: GlobalTheme) => void,
  changeLanguage: (value: any) => void
  login: (data: GlobalState) => void
}
export default actions;

state

import { reactive } from "vue";
import { GlobalState, globalState } from './global.state';

export interface StoreState extends GlobalState {
  xxx: {
    selectedMenu: string | null
  }
}

const state: StoreState = {
  ...globalState,
  xxx: {
    selectedMenu: 'dragTableA'
  },
};
export default reactive(state);

你期待的结果是什么？实际看到的错误信息又是什么？

这样做对后续开发对比vuex会有影响么

Answer 1

provide/inject暴露出来的属性不是响应式的，所以在渲染视图的时候可能会有问题。
并且会不知道数据是从哪里被修改的，在项目不断迭代的情况下可能会出现 debug 十分困难或者无法解决的问题。虽然 vuex 在不恰当使用的时候也会有这个问题但是会直接在控制台输出错误信息以便你修复。

如果你的组长没有使用过 vuex 或者 pinia，可以考虑使用 eventBus，但是这个是小规模应用，如果说是项目比较大的，还是建议使用 vuex/pinia。

Answer 2

没啥弊端，但是感觉有点脱裤子放屁。虽然用了 inject 注入，但是数据还是存在vuex的 store 的，那和直接在组件里用 store 没啥区别。并且这么用还得注意 inject 的响应问题，我觉得还不如直接在组件里用 store。