Vuex带你深度了解

Action

0. Action本质上是JavaScript函数，专门用来处理Vuex中的异步操作。
1. 不能直接修改State数据源，要通过commit调用返回给mapMutations，再通过mapMutations进行修改State数据。

Vuex的流程图

3. 载荷的使用和mutations使用一模一样
4. 使用：this.$store.dispatch('asyncAdd',10)

mapActions辅助函数

0. 基于Vuex提供的mapActions辅助函数，可以方便的把Store中指定的Action,映射为当前组件的methods

Getter

0. Getter本质上是JavaScript函数。

1. 作用：它是Vuex中的计算属性，可以避免组件内的计算属性局限性（复用性低），当Store数据源发生变化时，Getter的返回值会自动更新。

2. 在组件中，可以通过this,$store.getters.isAllDone

     getters:{
          isAllDone(state){
            // 计算属性必须有返回值,所哟要return
          }
        }
   

mapGetters

0. 基于Vuex提供的mapGetter辅助函数

Module

0. Module表示按照模块化的开发思想，把不同的数据和方法，按照彼此的关联关系进行封装。

1. 定义子模块并导出：

    export default {
      state,
      mutations,
      actions,
      getters
    }
   

2. 导入子模块并注册：

    import 模块对象 from '路径'
    modules: {
      模块名: 模块对象
    }
   

namespaced(命名空间)

0. 开启命名空间的作用：为了让每个子模块之间互不干扰

1. 使用：

   0. namespaced:true开启命名

      • 访问子模块的state数据，可以用到辅助函数mapStata进行映射，...mapstate('子模块名'，['数据名'])
      • 如果要使用子模块getters的话，可以用到辅助函数mapgetters进行映射，...mapgertter('子模块名'，['数据名'])

   1. namespaced:false关闭命名

辅助函数

0. 作用：让程序员更简单的访问Vuex中的数据或方法

1. 使用：

   0. 按需导入赋值函数：

       import {mapState,mapMutaions,mapActions,mapGetters}from 'vuex'
      

   1. 在computer/methods中调用并展开结果

       computed:{
          ...mapState([要导入的数据名])
       }
      

   2. 在子模块中，开启命名空间访问数据

       //1.按需导入
       import {mapState,mapMutaions,mapActions,mapGetters}from 'vuex'
       //2.使用辅助函数映射
       computed:{
          ...mapState('子模块名'，['要导入的数据名'])
       }
      

子模块

0. 为什么要划分子模块，如果部分子模块呢？

   后期业务量大了之后，所有的数据都要放到全 state中存储，所有的state都有配套的mutations/ actions/getters,,维护起来难度太大

1. 划分子模块后，每个模块都可以把自己的数据放到其中，配套的 mutations等都可以独立在自己模块内，方便后期维护 ，在中大型项目中一定会分子模块。

2. 如何划分子模块？

   1,定义子模块–〉创健一个对象，对象中有四个核心成员 state,mutations,actions,getters

   2.注册子模块-〉在全局的modu1es节点下配置，模块名：子 模块对象 /刚分好的子模块，定义的mutations和actions访问方式和全 局一样，为了避免子模块之间命名重复导致的调用混乱，强烈建议开自 [开启命名空间]： 在子模块中namespaced:true