vue中computed和vuex中getters计算属性传参

computed

<template>
  <div id="app">
    <h3>{{count(1)}}</h3> //需要在计算时传值
    <router-view></router-view> 
  </div>
</template>

  data() {
    return {
      counter: 100
    }
  },
  computed: {
    count() { //不在此处接收传入的值
      return function (num) {//先return一个函数,把属性变成函数属性,参数接收传入的值
        return this.counter - num //再return出计算结果
      }
    }
  }

getters

  this.$store.getters.moreThree(3)//在组件中使用需要传入值
  
  state: {
    arr: [1, 2, 3, 4, 5]
  },
  getters: {
    moreThree(state, getters) { //不在此处接收传入的值，默认传入state,第二个参数也可以是getters
      return function (num) {//先return一个函数,把属性变成函数属性,参数接收传入的值
        return state.arr.filter(item => item > num) //再return出计算结果
      }
    }
  }

mutations

<template>
  <div>
    <button @click="add(20)">+</button>//改变vuex中的状态需要传入值
    <button @click="sub(10)">-</button>
  </div>
</template>

<script>
export default {
  methods: {
    add(num) {//在属性中先接收template中的值
      this.$store.commit('add', num)//第二个参数接受template中的值
    },
    sub(num) {
      this.$store.commit('sub', num)
    }
  }
}
</script>

 mutations: {//vuex中的mutations
    add(state, num) {//在vuex中的mutations对象与上面两种不一样,可以直接在属性中设置参数接受组件中需要传入的值
      state.count += num
    },
    sub(state, num) {
      state.count -= num
    }
  },

————————————————
版权声明：本文为CSDN博主「花涛的个人博客」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_40680292/java/article/details/103191735