vuex分模块调用mutation

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它允许我们在应用的不同组件间共享和管理状态。在Vuex中，可以通过模块化的方式来组织和管理不同部分的状态。

使用Vuex分模块调用mutation非常简单。首先，我们需要在store文件夹中创建一个新的模块文件。

在这个模块文件中，我们可以定义自己的状态state、修改状态的mutation以及处理异步操作的action。接着，我们需要在store文件夹的index.js文件中导入新创建的模块，并将其添加到modules对象中。

最后，我们就可以在组件中使用this.$store来调用模块中定义的mutation了。我们可以使用mapMutations方法将mutation映射到组件的methods中，然后就可以在组件中直接调用映射的方法来修改模块中的状态了。

例如，假设我们有一个模块叫做user，其中定义了一个mutation叫做SET_USER，用于设置用户信息。那么我们可以在组件中使用以下方式来调用该mutation：

1. 导入mapMutations方法：import { mapMutations } from 'vuex';
2. 将SET_USER mutation映射到组件的methods中：methods: { ...mapMutations('user', ['SET_USER']) }
3. 在需要修改用户信息的地方调用SET_USER方法：this.SET_USER(userInfo);

通过以上的步骤，我们就可以在组件中调用模块中的mutation，并且将相关的状态进行修改了。

总之，Vuex分模块调用mutation非常方便。我们只需要按照上述步骤在store文件夹中创建新的模块文件，并将其导入并配置到index.js中，然后在组件中使用mapMutations方法来映射mutation并在需要的地方进行调用即可。这样可以使得代码更加模块化和可维护性更高。