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

文章目录

1.Vuex(一)–为什么要使用Vuex
2.Vuex(二)–Vue核心概念State
3.Vuex(三)–Vue核心概念Getter
4.Vuex(四)–Vue核心概念Mutation
5.Vuex(五)–Vue核心概念Action
6.Vuex(六)–Vue核心概念Module
在上一篇《Vuex(二)–Vue核心概念State》，我们介绍了State。
有时候我们需要从 store 中的 state 中派生出一些状态。
如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
Vuex 允许我们在 store 中定义getter（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
比如这里我们在Page4.vue里面需要对商品价格加倍，我们就可以使用Getter。

使用Getter

store.js，我们在state下面加入getters里面有一个商品价格加倍的方法。

getters: {
        // 商品价格加倍
        goodsPriceDoubble: state => {
            var goodsPriceDoubble = state.goodsList.map(function(item){
                return {
                    price: item.price * 2,
                    name: item.name
                }
            })
            return goodsPriceDoubble;
        }
    }

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

<li v-for="item in goodsPriceDoubble">
    <p class="name">商品：{{item.name}}</p>
    <p class="price">价格：￥{{item.price}}</p>
</li>

在computed中加入如下方法：

goodsPriceDoubble() {
    return this.$store.getters.goodsPriceDoubble;
}

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

代码下载

下载请点击我！