面试题：如何在复杂业务场景下合理选择Provide/Inject、Vuex和Pinia

Question

假设现在有一个具有多层嵌套组件结构，并且存在复杂业务逻辑，不同模块间有频繁数据交互和共享需求的Vue项目。请阐述在这样的复杂业务场景下，如何综合考虑并合理选择Provide/Inject、Vuex和Pinia来进行状态管理，以达到最优的性能和可维护性，并给出具体的设计思路和架构方案。

Answer 1

1. Provide/Inject

• 适用场景：适用于解决组件间跨层级传递数据的问题，尤其是当不需要响应式数据更新时。比如在多层嵌套组件结构中，顶层组件向深层子组件传递一些配置信息（如主题、语言等），这些信息不经常变动，不需要全局状态管理。
• 设计思路：在父组件中使用 provide 提供数据，在子组件中使用 inject 接收数据。例如：

// 父组件
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  provide() {
    return {
      theme: 'dark'
    };
  }
};
</script>

// 子组件
<template>
  <div>
    {{ theme }}
  </div>
</template>

<script>
export default {
  inject: ['theme']
};
</script>

2. Vuex

• 适用场景：适用于大型项目，当项目中不同模块间有频繁数据交互和共享，且需要严格的状态管理和数据追踪时。比如购物车模块，订单模块等多个模块都需要共享用户信息、商品列表等数据，并且需要记录状态变化的历史。
• 设计思路：
  • State：定义全局状态，如用户信息、购物车商品列表等。
  • Mutations：用于修改 state，且必须是同步操作。例如：

// store.js
const state = {
  user: null,
  cartList: []
};

const mutations = {
  SET_USER(state, user) {
    state.user = user;
  },
  ADD_TO_CART(state, product) {
    state.cartList.push(product);
  }
};

- **Actions**：用于处理异步操作，提交 `mutations`。例如：

const actions = {
  async login({ commit }, credentials) {
    const response = await axios.post('/login', credentials);
    commit('SET_USER', response.data.user);
  }
};

- **Getters**：用于从 `state` 派生一些状态，如购物车商品总数。

const getters = {
  cartTotal: state => state.cartList.length
};

• 架构方案：将 state、mutations、actions、getters 组织在一个 store 对象中，并通过 Vue.use(Vuex) 安装到 Vue 实例。在组件中通过 this.$store 访问和操作状态。

3. Pinia

• 适用场景：类似于 Vuex，但语法更简洁，开发体验更好，适用于 Vue 3 项目。同样适用于不同模块间频繁数据交互和共享的场景，并且在代码简洁性和可维护性上表现出色。
• 设计思路：
  • Define Store：使用 defineStore 定义 store。例如：

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null
  }),
  actions: {
    async login(credentials) {
      const response = await axios.post('/login', credentials);
      this.user = response.data.user;
    }
  }
});

- **Use Store**：在组件中使用 `useUserStore` 获取 store 实例并操作状态。

<template>
  <button @click="login">Login</button>
</template>

<script>
import { useUserStore } from './stores/userStore';

export default {
  setup() {
    const userStore = useUserStore();
    const login = () => userStore.login({ username: 'test', password: '123' });
    return { login };
  }
};
</script>

综合选择

• 对于简单的跨层级数据传递，优先使用 Provide/Inject，它可以避免引入复杂的状态管理库，同时满足特定场景下的数据传递需求。
• 对于大型项目且需要严格状态管理和数据追踪的部分，选择 Vuex，虽然语法相对复杂，但它强大的功能可以满足严格的业务需求。
• 如果是 Vue 3 项目，在不需要严格遵循 Flux 模式，追求简洁开发体验时，优先选择 Pinia，它在提供状态管理功能的同时，保持了代码的简洁和易维护。在整个项目中，可以根据不同模块的具体需求，灵活搭配使用这三种状态管理方式，以达到最优的性能和可维护性。