面试题：Vue Pinia中如何处理模块间的数据共享与依赖问题

Question

在Vue Pinia开发中，不同模块可能需要共享数据或存在依赖关系。请阐述你通常采用什么方式来处理这种情况，举例说明如何在两个模块间共享数据，并确保数据的一致性和依赖的正确处理。

Answer 1

处理方式

1. 通过全局状态管理：利用Pinia的Store特性，将共享数据提取到一个公共的Store中。所有需要使用该数据的模块都从这个公共Store获取数据，这样保证了数据的一致性。同时，Pinia基于Vue的响应式系统，数据变化会自动通知相关组件。
2. 模块间直接引用：如果模块间的依赖关系比较简单，可以在一个模块中直接引入另一个模块的Store实例，并使用其数据和方法。但这种方式需要注意循环引用问题。

示例

假设我们有两个模块：userStore 和 productStore，productStore 需要使用 userStore 中的用户登录状态来判断是否显示某些产品功能。

1. 创建 userStore

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    isLoggedIn: false
  }),
  actions: {
    login() {
      this.isLoggedIn = true;
    },
    logout() {
      this.isLoggedIn = false;
    }
  }
});

2. 创建 productStore

import { defineStore } from 'pinia';
import { useUserStore } from './userStore';

export const useProductStore = defineStore('product', {
  state: () => ({
    products: []
  }),
  getters: {
    availableProducts() {
      const userStore = useUserStore();
      if (userStore.isLoggedIn) {
        return this.products.filter(product => product.isAvailableForLoggedIn);
      }
      return this.products.filter(product => product.isAvailableForGuest);
    }
  }
});

在上述示例中，productStore 通过引入 userStore 并使用其 isLoggedIn 状态来决定哪些产品是可用的，确保了数据的一致性和依赖的正确处理。同时，当 userStore 中的 isLoggedIn 状态发生变化时，productStore 的 availableProducts 计算属性也会自动更新。