VUEX 使用学习五 : getter

vuex,使用,学习,getter · 浏览次数 : 112

小编点评

**Getter对Store中的数据进行加工处理形成新的数据。他不会修改state中的原始数据，起到的是包装数据的作用。** **应用场景：** 1. 相当于state的计算属性（基于State处理成另外一份数据） 2. 模板中需要的数据和State中的数据不完全一样；需要基于state中的数据进行加工处理，形成一份新的数据，给模板使用特点 3. Getter 可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性 **使用方法：** 1. **第一种方式：** - `this.$store.getters.名字 `调用getters第一种方式//组件中调用 {{$store.getters.计算属性名}} - **注意**: 不分模块、模块名和计算属性名之间使用斜线 2. **第二种方式：** - `import {maptGetters} from 'vuex'`导入mapState函数 - `maptGetters(['showNum'])`通过以函数映射的方式将当前组件所需的全局数据，映射为当前组件的computed计算属性 3. **第三种方式：** - 直接使用mapGeterrs中声明的属性

正文

转载请注明出处：

　　Getter对Store中的数据进行加工处理形成新的数据。他不会修改state中的原始数据，起到的是包装数据的作用；

　　有时我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数

　　如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它（无论哪种方式都不是很理想）。getter就是为了解决这个问题而产生的。

应用场景：

　　1. 相当于state的计算属性（基于State处理成另外一份数据）
　　2. 模板中需要的数据和State中的数据不完全一样；需要基于state中的数据进行加工处理，形成一份新的的数据，给模板使用

特点：

　　1. Getter 可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性。

　　2. Store 中数据发生变化，Getter 的数据也会跟着变化。

　　3. getters不会修改state中的数据

使用：

　　1.第一种方式：this.$store.getters.名字 是调用getters第一种方式

//组件中调用
 {{$store.getters.计算属性名}}                      // 不分模块
 {{this.$store.getters['模块名/计算属性名']}}       // 分模块
 
 //store.js中定义
   getters: {
    showNum (state){
      return `当前最新的数据${state.count}`
    }
  }

通过以函数映射的方式

// 1.从vuex中按需求导入mapState函数
import {maptGetters} from 'vuex'

// 通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性


// 2. 将指定的mutations函数,映射为当前组件的methods函数
computed :{ 
    ...maptGetters(['showNum']) 
    // 不分模块
    ...mapGetters(['计算属性名'])

    // 分模块，不重命名计算属性
    ...mapGetters('模块名', ['计算属性名'])
}

// 3.直接使用mapGeterrs中声明的属性

　　　　在网上找到一个demo 示例，可参考学习： https://gitee.com/xiangbaxiang/vue-store