Vuex(三)--Vue核心概念Getter

有时候我们需要从 store 中的 state 中派生出一些状态。
如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
Vuex 允许我们在 store 中定义getter属性（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
比如这里我们在Page4.vue里面需要对商品价格加倍，我们就可以使用Getter。

    /** 
     * 1) 包含多个计算属性(get)的对象 
     * 2) 谁来读取: 组件中:this.$store.getters.xxx
    */

使用Getter

store.js，我们在state下面加入getters里面有一个商品价格加倍、商品价格加倍个数、自定义单价超过多少(getter传参)的方法。

getters对象中的方法有两个参数:

第一个参数为：state

第二个参数为：getters(可选)

// 在分离出来的vuex文件中安装 Vuex 
import Vue from 'vue' 
import Vuex from 'vuex' 
Vue.use(Vuex) 

// 每一个Vuex仓库中只能包含一个store实例
export const store = new Vuex.Store({ 
    state: { // 把页面显示数据写在store.js文件 
        goodsList: [ 
            { name: '赣州橙子', price: '8.8' }, 
            { name: '新疆哈密瓜', price: '2.0' }, 
            { name: '山东大枣', price: '3.2' }, 
            { name: '阳澄湖大闸蟹', price: '10.0' } 
        ] 
    },
    // getters是vuex中的计算属性对象
    getters: {
        //商品价格加倍;其中goodsPriceDoubble(state,getters)中有一个state参数表示state中的数据对象,getters参数表示getters中的方法数据对象
        goodsPriceDoubble: state => {
            let goodsPriceDoubble = state.goodsList.map(currentValue => {
                return {
                    name: currentValue.name,
                    price: currentValue.price * 2
                }
            })
            return goodsPriceDoubble;
        },
        // goodsPriceDoubble的个数
        goodsPriceDoubbleLength(state, getters){
            return getters.goodsPriceDoubble.length;
        },
        // 自定义单价超过多少的函数（getter传参）
        goodsPriceMore(state){
            return function(price){  
                return  state.goodsList.filter(item => {
                    return item.price > price;
                })
            }
        }
    }
})

在page4.vue里面修改成如下：

        <ul class="ul_list">
            <li v-for="item in goodsPriceTwo">
                <p class="name">商品：{{item.name}}</p>
                <p class="price">价格：￥{{item.price}}</p>
            </li>
        </ul>
        <div>商品价格加倍的个数：{{goodsPriceDoubbleLength}}</div>
        <div>自定义单价超过多少的数据：{{goodsPriceMore(9)}}</div>

在computed中加入如下方法：

important {mapGetters} from 'vuex'
      computed: { // 一般会在计算属性中使用
          goodsPriceTwo() {
             //this.$store.getters.vuex getters中的对应的回调函数的函数名
             return this.$store.getters.goodsPriceDoubble;
          },
          ...mapGetters(['goodsPriceDoubbleLength','goodsPriceMore'])
      }

显示效果就是page4的商品价格加倍了。

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

// 直接在模块中使用doneTodosCount获取数据

 

 

 

参考文献：链接