【前端VUE基础（八）】Vuex 辅助函数

在 Vuex 中，有几个辅助函数可以帮助你更方便地使用和管理状态、操作和获取器。以下是一些常用的 Vuex 辅助函数：

一、mapState

 将 Vuex store 中的状态映射为组件的计算属性， mapState有两种常用的写法，分别是对象语法和数组语法：

（一）对象语法：

写法一：

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      uploadLogList: state => state.uploadfile.uploadLogList,
      isLoading: state => state.uploadfile.isLoading,
      error: state => state.uploadfile.error
    })
  },
  // ...
};

        在对象语法中，我们通过一个对象来定义映射关系，在键值对中指定组件中的计算属性名称作为键，然后使用箭头函数返回需要映射的状态值。 

 写法二： 

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState('uploadfile', ['uploadLogList', 'isLoading', 'error'])
  },
  // ...
};

推荐使用第二种这种写法。原因如下：

1. 语法更加简洁明了，直接指定模块名和需要映射的属性名称，不需要额外的箭头函数或命名空间参数。
2. 在组件中使用uploadLogList时，可以清晰地知道该属性来自于哪个模块，提高了可读性。
3. 当需要映射多个属性时，可以在数组中列出所有需要映射的属性，使代码更加整洁。

 （二）数组语法：

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['uploadLogList', 'isLoading', 'error'])
  },
  // ...
};

        在数组语法中，我们只需列出需要映射的状态属性名称，而不需要指定映射的模块。这种写法会自动将这些属性映射到组件的根状态（即this.$store.state）中。 

 总结：

在大型项目中，更推荐使用对象语法（...mapState('module', ['property'])）来映射状态属性。这是因为大型项目通常具有复杂的模块化结构，并且存在多个模块之间的状态共享和交互。

以下是选择对象语法的原因：

1. 模块明确：在大型项目中，往往存在多个模块，每个模块都有自己的状态属性。使用对象语法可以明确指定所需属性属于哪个模块，将状态属性与特定模块关联起来，提高了代码的可读性和可维护性。

2. 避免命名冲突：在大型项目中，可能会存在多个模块中同名的状态属性。使用对象语法，可以避免不同模块中的状态属性名称冲突，减少潜在的错误。

3. 模块解耦：使用对象语法可以将组件与特定模块解耦。当模块内部的状态结构发生变化时，只需更新模块内部的代码，而不需要修改组件中的映射代码。这有助于降低代码的耦合性和维护成本。

总之，对于大型项目来说，对象语法更具可扩展性、可读性和维护性，能更好地管理和组织模块化状态属性。使用对象语法能够更清晰地表达状态属性来自于哪个模块，并避免潜在的冲突和错误。

二、 mapGetters

mapGetters: 将 Vuex store 中的获取器（getters）映射为组件的计算属性。

三、mapMutations

mapMutations: 将 Vuex store 中的变更方法（mutations）映射为组件的方法。

四、 mapActions

mapActions: 将 Vuex store 中的动作方法（actions）映射为组件的方法。