vuex中的状态管理器中的计算属性

日期:2021-08-21 15:25:13    浏览:138

先看看vue中的计算属性

vuex中的计算属性(getters),不带参数,带参数,和应用兄弟间的函数

export default createStore({
  state: {
    num:10,
    dnum:5
  },
  getters:{
    //不带参数的写法
    mepow(state){
      return state.num * state.num ;
    },
    //带参数写法
    fpow(state){
      return function (bb){
        return state.dnum * state.dnum * bb;
      }
    },
    //第二个参数getters引用上一个方法
    mpow(state,getters){
      return getters.fpow(9);
    }
  },
})

显示

<template>
  <h3>在About组件中应用vuex</h3>
  {{ $store.state.num }}
  <h3>在About组件中应用vuex</h3>
  {{ $store.state.dnum }}
  <h3>计算属性</h3>
  {{ mypow }}
  <h3>vuex中的计算属性</h3>
  {{ $store.getters.mepow }}
  <h3>vuex中的计算属性带参数</h3>
  {{ $store.getters.fpow(2) }}
  <h3>vuex中的计算属性带参数</h3>
  {{ $store.getters.mpow }}
</template>

Tags: vue

世事无常

要有遥不可及的梦想,也要有脚踏实地的本事