在 Vuex/Pinia 中，如何实现跨模块的数据共享和依赖？

各位观众，欢迎来到今天的“Vuex/Pinia跨模块数据共享与依赖：打破模块壁垒，拥抱数据自由”讲座！我是你们的老朋友，今天就来跟大家聊聊如何在Vuex和Pinia里玩转模块，让数据像水一样自由流动。

开场白：模块化的甜蜜与烦恼

在Vue.js应用中，为了组织代码，我们通常会将状态管理拆分成多个模块 (modules)。这就像把一个大公司分成若干个部门，每个部门负责不同的业务，职责清晰，便于维护。但问题也来了，部门之间需要协作，数据需要共享，如果部门之间各自为政，互不理睬，那公司就完犊子了。同样，如果Vuex/Pinia的模块之间无法共享数据和建立依赖关系，那模块化也就失去了意义。

今天，我们就来解决这个“部门协作”问题，让大家掌握Vuex和Pinia中跨模块数据共享和依赖的各种姿势。

第一幕：Vuex的跨模块数据共享与依赖

Vuex，作为Vue.js官方的状态管理库，历史悠久，生态完善，用的人自然也多。我们先来看看Vuex是如何实现模块间数据共享和依赖的。

1.1 访问其他模块的状态：rootState和rootGetters

Vuex允许你在一个模块内访问根状态（rootState）和其他模块的状态（通过rootState）。同时，你也可以访问根级别的 getters（rootGetters）。

这就像你作为一个部门经理，不仅可以了解自己部门的运营情况，还可以通过公司高层（rootState）了解整个公司的战略方向，以及通过公司智囊团（rootGetters）获取一些有用的建议。

// store.js
const moduleA = {
  namespaced: true,
  state: () => ({
    message: 'Hello from Module A'
  }),
  getters: {
    upperCaseMessage: (state) => {
      return state.message.toUpperCase();
    }
  }
};

const moduleB = {
  namespaced: true,
  state: () => ({
    count: 0
  }),
  getters: {
    // 在 moduleB 的 getter 中访问 moduleA 的状态和 getter
    getMessageFromA: (state, getters, rootState, rootGetters) => {
      return rootState.moduleA.message; // 访问 moduleA 的 state
    },
    getUpperCaseMessageFromA: (state, getters, rootState, rootGetters) => {
      return rootGetters['moduleA/upperCaseMessage']; // 访问 moduleA 的 getter
    }
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAndLogMessage({ commit, dispatch, state, rootState, rootGetters }) {
      commit('increment');
      console.log("Module A's message:", rootState.moduleA.message);
      console.log("Module A's upper case message:", rootGetters['moduleA/upperCaseMessage']);
    }
  }
};

const store = new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
});

// 在组件中使用
new Vue({
  el: '#app',
  store,
  computed: {
    messageFromA() {
      return this.$store.getters['moduleB/getMessageFromA'];
    },
    upperCaseMessageFromA() {
      return this.$store.getters['moduleB/getUpperCaseMessageFromA'];
    },
    count() {
      return this.$store.state.moduleB.count;
    }
  },
  methods: {
    incrementAndLog() {
      this.$store.dispatch('moduleB/incrementAndLogMessage');
    }
  }
});

代码解释：

• namespaced: true：这个属性非常重要！它开启了命名空间，保证了模块内的 getters、mutations 和 actions 不会和其他模块冲突。 强烈建议开启。
• rootState：允许你访问根状态，以及其他模块的状态。
• rootGetters：允许你访问根级别的 getters，以及其他模块的 getters。 注意，访问其他模块的getter需要使用完整的路径，例如 'moduleA/upperCaseMessage'。
• 组件中使用 this.$store.getters['moduleB/getMessageFromA'] 访问其他模块的 getter。
• 组件中使用 this.$store.dispatch('moduleB/incrementAndLogMessage') 触发其他模块的 action。

1.2 触发其他模块的 actions 和 mutations

在一个模块中，你可以通过 dispatch 触发其他模块的 actions，也可以通过 commit 触发其他模块的 mutations。

这就像一个部门经理可以向其他部门发出指令（actions），或者直接修改其他部门的一些设置（mutations）。

// moduleA
const moduleA = {
  namespaced: true,
  actions: {
    doSomething({ commit }) {
      // 触发 moduleB 的 mutation
      commit('moduleB/doSomethingElse', null, { root: true });
    }
  }
};

// moduleB
const moduleB = {
  namespaced: true,
  mutations: {
    doSomethingElse(state) {
      console.log('moduleB received the mutation!');
    }
  }
};

const store = new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
});

// 在组件中使用
new Vue({
  el: '#app',
  store,
  mounted() {
    this.$store.dispatch('moduleA/doSomething');
  }
});

代码解释：

• commit('moduleB/doSomethingElse', null, { root: true })： root: true 表示提交的是根级别的 mutation，而不是当前模块的 mutation。 必须加上，不然会报错。
• dispatch('moduleA/doSomething')：触发 moduleA 的 action。

1.3 使用 mapState, mapGetters, mapActions, mapMutations

Vuex 提供了辅助函数 mapState, mapGetters, mapActions, mapMutations，方便你在组件中映射模块的状态、getters、actions 和 mutations。

这就像公司给每个部门都配备了专门的对接人员，方便各个部门之间的协作。

import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';

const moduleA = {
  namespaced: true,
  state: () => ({
    message: 'Hello from Module A'
  }),
  getters: {
    upperCaseMessage: (state) => {
      return state.message.toUpperCase();
    }
  },
  mutations: {
    setMessage(state, payload) {
      state.message = payload;
    }
  },
  actions: {
    asyncUpdateMessage({ commit }, payload) {
      return new Promise((resolve) => {
        setTimeout(() => {
          commit('setMessage', payload);
          resolve();
        }, 1000);
      });
    }
  }
};

const store = new Vuex.Store({
  modules: {
    moduleA
  }
});

new Vue({
  el: '#app',
  store,
  computed: {
    ...mapState('moduleA', ['message']), // 映射 moduleA 的 state
    ...mapGetters('moduleA', ['upperCaseMessage']) // 映射 moduleA 的 getter
  },
  methods: {
    ...mapActions('moduleA', ['asyncUpdateMessage']), // 映射 moduleA 的 action
    ...mapMutations('moduleA', ['setMessage'])  // 映射 moduleA 的 mutation
  },
  mounted() {
    this.asyncUpdateMessage('New Message from Component');
    this.setMessage('Directly set Message');
  },
  template: `
    <div>
      <p>Message: {{ message }}</p>
      <p>Upper Case Message: {{ upperCaseMessage }}</p>
    </div>
  `
});

代码解释：

• mapState('moduleA', ['message'])：将 moduleA 的 state 中的 message 映射到组件的 message 属性。
• mapGetters('moduleA', ['upperCaseMessage'])：将 moduleA 的 getter 中的 upperCaseMessage 映射到组件的 upperCaseMessage 计算属性。
• mapActions('moduleA', ['asyncUpdateMessage'])：将 moduleA 的 action 中的 asyncUpdateMessage 映射到组件的 asyncUpdateMessage 方法。
• mapMutations('moduleA', ['setMessage'])：将 moduleA 的 mutation 中的 setMessage 映射到组件的 setMessage 方法。

Vuex 的局限性

虽然Vuex功能强大，但是在模块间数据共享和依赖方面，也存在一些局限性：

• 代码冗余： 需要手动指定 root: true 来访问根级别的 mutations 和 actions，代码不够简洁。
• 类型提示缺失： 使用字符串访问其他模块的状态和 getters，IDE 无法提供类型提示，容易出错。
• 依赖注入困难： 如果模块之间存在复杂的依赖关系，手动管理这些依赖关系会变得非常繁琐。

第二幕：Pinia的跨模块数据共享与依赖

Pinia，作为新一代的状态管理库，吸取了Vuex的经验教训，在设计上更加简洁、高效，并且更好地支持 TypeScript。

2.1 Pinia的设计哲学：扁平化和组合式

Pinia 的设计哲学是扁平化和组合式。 它摒弃了 Vuex 的模块 (modules) 概念，取而代之的是 store 的概念。 每个 store 都是一个独立的个体，但可以通过组合的方式来实现模块间的共享和依赖。

这就像把一个公司拆分成若干个独立的创业团队，每个团队都负责自己的业务，但可以通过合作、共享资源等方式来实现整体的协同效应。

2.2 创建和使用 Store

在 Pinia 中，你需要先定义一个 store，然后才能在组件中使用它。

// store/user.ts
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John Doe',
    age: 30
  }),
  getters: {
    fullName: (state) => state.name + ' (Age: ' + state.age + ')',
  },
  actions: {
    incrementAge() {
      this.age++;
    },
    setName(newName: string) {
      this.name = newName;
    },
  },
});

// store/product.ts
import { defineStore } from 'pinia';

export const useProductStore = defineStore('product', {
  state: () => ({
    products: [
      { id: 1, name: 'Apple', price: 1 },
      { id: 2, name: 'Banana', price: 0.5 },
    ],
  }),
  getters: {
    totalPrice: (state) => state.products.reduce((sum, product) => sum + product.price, 0),
  },
  actions: {
    addProduct(name: string, price: number) {
      this.products.push({ id: Date.now(), name, price });
    },
  },
});

代码解释：

• defineStore('user', { ... })：定义一个名为 user 的 store。 第一个参数是 store 的唯一 ID，用于在 Pinia 中识别这个 store。
• state: () => ({ ... })：定义 store 的状态。 必须是一个函数，返回一个对象。
• getters: { ... }：定义 store 的 getters。 getter 的第一个参数是 state。
• actions: { ... }：定义 store 的 actions。 action 可以包含任意的异步逻辑。

2.3 在组件中使用 Store

<template>
  <div>
    <h1>User Information</h1>
    <p>Name: {{ userStore.name }}</p>
    <p>Full Name: {{ userStore.fullName }}</p>
    <p>Age: {{ userStore.age }}</p>
    <button @click="userStore.incrementAge">Increment Age</button>

    <h1>Product Information</h1>
    <p>Total Price: {{ productStore.totalPrice }}</p>
    <ul>
      <li v-for="product in productStore.products" :key="product.id">
        {{ product.name }} - ${{ product.price }}
      </li>
    </ul>
    <input type="text" v-model="newProductName" placeholder="Product Name">
    <input type="number" v-model="newProductPrice" placeholder="Product Price">
    <button @click="addProduct">Add Product</button>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/user';
import { useProductStore } from '@/store/product';
import { ref } from 'vue';

const userStore = useUserStore();
const productStore = useProductStore();

const newProductName = ref('');
const newProductPrice = ref(0);

const addProduct = () => {
  productStore.addProduct(newProductName.value, newProductPrice.value);
  newProductName.value = '';
  newProductPrice.value = 0;
};
</script>

代码解释：

• import { useUserStore } from '@/store/user';：导入 useUserStore 函数。
• const userStore = useUserStore();：调用 useUserStore 函数，获取 store 的实例。
• 在模板中，可以直接通过 userStore.name、userStore.fullName、userStore.age 访问 store 的状态和 getters。
• 可以通过 userStore.incrementAge() 调用 store 的 action。

2.4 Pinia 的跨 Store 数据共享与依赖

Pinia 的精髓在于如何实现跨 Store 的数据共享和依赖。 由于 Pinia 没有模块的概念，所以你需要手动在 Store 之间建立联系。

2.4.1 在 Store 中使用其他 Store

在一个 Store 中，你可以通过调用其他 Store 的 useStore 函数来获取其他 Store 的实例，从而访问其他 Store 的状态、getters 和 actions。

这就像一个创业团队需要调用其他团队的服务，只需要直接联系其他团队的负责人即可。

// store/cart.ts
import { defineStore } from 'pinia';
import { useProductStore } from './product';

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [] as { productId: number; quantity: number }[],
  }),
  getters: {
    totalPrice: (state) => {
      const productStore = useProductStore();
      return state.items.reduce((sum, item) => {
        const product = productStore.products.find((p) => p.id === item.productId);
        return product ? sum + product.price * item.quantity : sum;
      }, 0);
    },
  },
  actions: {
    addItem(productId: number, quantity: number) {
      this.items.push({ productId, quantity });
    },
  },
});

代码解释：

• import { useProductStore } from './product';：导入 useProductStore 函数。
• const productStore = useProductStore();：调用 useProductStore 函数，获取 productStore 的实例。
• 在 totalPrice getter 中，可以通过 productStore.products 访问 productStore 的状态。

2.4.2 使用 storeToRefs 解构 Store 的状态

如果你想在组件中解构 Store 的状态，可以使用 storeToRefs 函数。 storeToRefs 会将 Store 的状态转换为响应式的 ref 对象，这样你就可以在模板中直接使用这些 ref 对象，而不需要通过 store.state.xxx 访问状态。

这就像公司为了方便员工使用，将一些常用的资源都整理成文档，方便员工查阅。

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/user';
import { storeToRefs } from 'pinia';

const userStore = useUserStore();
const { name, age } = storeToRefs(userStore);
</script>

代码解释：

• const { name, age } = storeToRefs(userStore);：将 userStore 的 name 和 age 状态转换为响应式的 ref 对象。
• 在模板中，可以直接使用 name 和 age，而不需要通过 userStore.name 和 userStore.age 访问状态。

Pinia 的优势

相比 Vuex，Pinia 在模块间数据共享和依赖方面具有以下优势：

• 类型安全： Pinia 更好地支持 TypeScript，可以提供更准确的类型提示。
• 更简洁的 API： Pinia 的 API 更加简洁易懂，学习成本更低。
• 更好的性能： Pinia 的性能比 Vuex 更好，尤其是在大型应用中。
• 无需 modules： Pinia 摒弃了 Vuex 的 modules 概念，使状态管理更加扁平化和灵活。
• 组合式 API： Pinia 完美地支持 Vue 3 的组合式 API，可以更好地组织和复用代码。

总结：选择适合你的状态管理方案

特性	Vuex	Pinia
模块化	支持 modules	没有 modules，采用扁平化 store 结构
TypeScript 支持	一般，类型推断需要额外配置	优秀，原生支持 TypeScript
API	复杂，需要了解 mutations、actions 等概念	简洁，易于学习和使用
性能	相对较差	更好
适用场景	中小型 Vue 2 项目，或者需要 Vuex 生态的项目	推荐用于 Vue 3 项目，特别是大型项目

Vuex 和 Pinia 都是优秀的状态管理库，选择哪个取决于你的项目需求和个人偏好。 如果你的项目是 Vue 2 的，并且已经使用了 Vuex，那么继续使用 Vuex 也是一个不错的选择。 如果你的项目是 Vue 3 的，并且追求更好的性能和类型安全，那么 Pinia 绝对值得一试。

结语：拥抱数据自由，构建更强大的应用

通过今天的讲座，相信大家已经掌握了 Vuex 和 Pinia 中跨模块数据共享和依赖的各种技巧。 无论是使用 Vuex 的 rootState 和 rootGetters，还是使用 Pinia 的组合式 API，都可以让你轻松地打破模块壁垒，让数据像水一样自由流动，构建更强大的 Vue.js 应用。

感谢大家的观看，我们下期再见！