vueのcomputedとvuexのgetters計算プロパティパラメータ

9178 ワード

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
    }
  },