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一個函數(shù),把屬性變成函數(shù)屬性,參數(shù)接收傳入的值
        return this.counter - num //再return出計算結(jié)果
      }
    }
  }

getters

  this.$store.getters.moreThree(3)//在組件中使用需要傳入值
  
  state: {
    arr: [1, 2, 3, 4, 5]
  },
  getters: {
    moreThree(state, getters) { //不在此處接收傳入的值，默認傳入state,第二個參數(shù)也可以是getters
      return function (num) {//先return一個函數(shù),把屬性變成函數(shù)屬性,參數(shù)接收傳入的值
        return state.arr.filter(item => item > num) //再return出計算結(jié)果
      }
    }
  }

mutations

<template>
  <div>
    <button @click="add(20)">+</button>//改變vuex中的狀態(tài)需要傳入值
    <button @click="sub(10)">-</button>
  </div>
</template>

<script>
export default {
  methods: {
    add(num) {//在屬性中先接收template中的值
      this.$store.commit('add', num)//第二個參數(shù)接受template中的值
    },
    sub(num) {
      this.$store.commit('sub', num)
    }
  }
}
</script>

 mutations: {//vuex中的mutations
    add(state, num) {//在vuex中的mutations對象與上面兩種不一樣,可以直接在屬性中設(shè)置參數(shù)接受組件中需要傳入的值
      state.count += num
    },
    sub(state, num) {
      state.count -= num
    }
  },

————————————————
版權(quán)聲明：本文為CSDN博主「花濤的個人博客」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_40680292/java/article/details/103191735