本文共 2573 字，大约阅读时间需要 8 分钟。

有时候我们需要从 store 中的 state 中派生出一些状态。

/**      * 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里面修改成如下：

   
            
    
                
商品：{  {item.name}}
                
价格：￥{  {item.price}}
            
        
   
        
   
    商品价格加倍的个数：{  {goodsPriceDoubbleLength}}
   
        
   
    自定义单价超过多少的数据：{  {goodsPriceMore(9)}}
   

在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获取数据

参考文献：