點燈坊

失くすものさえない今が強くなるチャンスよ

Vue 之 Computed Setter

Sam Xiao's Avatar 2023-10-15

Computed 除了能當 Model 的 Getter 外，事實上也能實作出 Setter。

Version

Vue 2.6.11

Setter

<template>
  <div>
    <input type="text" v-model="fullName">
    {{ fullName }}
  </div>
</template>

<script>
let fullName = {
  get: function() {
    return `${this.firstName} ${this.lastName}`
  },
  set: function(value) {
    [this.firstName, this.lastName] = value.split(' ')
  }
}

export default {
  name: 'App',
  data: () => ({
    firstName: 'Sam',
    lastName: 'Xiao'
  }),
  computed: {
    fullName
  }
}
</script>

25 行

computed: {
  fullName
}

在 computed property 宣告 fullName computed。

第 9 行

let fullName = {
  get: function() {
    return `${this.firstName} ${this.lastName}`
  },
  set: function(value) {
    [this.firstName, this.lastName] = value.split(' ')
  }
}

原本 computed 為 function，若要使用 computed setter，則 computer 為 object，並包含 get() 與 set() 兩 function。

其中 set() 的 argument 為寫入值，可用此寫入 model。

Function

<template>
  <div>
    <input type="text" v-model="fullName">
    {{ fullName }}
  </div>
</template>

<script>
let _fullName = function() {
  return `${this.firstName} ${this.lastName}`
}

let fullName_ = function(value) {
  [this.firstName, this.lastName] = value.split(' ')
}

export default {
  name: 'App',
  data: () => ({
    firstName: 'Sam',
    lastName: 'Xiao'
  }),
  computed: {
    fullName: {
      get: _fullName,
      set: fullName_
    }
  }
}
</script>

23 行

computed: {
  fullName: {
    get: _fullName,
    set: fullName_
  }
}

雖然 computed setter 需使用 object，但也可將 object 宣告在 computed property 內，將 get() 以 _ prefix 表示，且將 set() 以 _ postfix 表示。

第 9 行

let _fullName = function() {
  return `${this.firstName} ${this.lastName}`
}

let fullName_ = function(value) {
  [this.firstName, this.lastName] = value.split(' ')
}

如此在 export default 外依然可繼續使用 function。

Explicit Argument

<template>
  <div>
    <input type="text" v-model="fullName">
    {{ fullName }}
  </div>
</template>

<script>
let _fullName = ({ firstName, lastName }) => `${firstName} ${lastName}`

let fullName_ = function(value) {
  [this.firstName, this.lastName] = value.split(' ')
}

export default {
  name: 'App',
  data: () => ({
    firstName: 'Sam',
    lastName: 'Xiao'
  }),
  computed: {
    fullName: {
      get: _fullName,
      set: fullName_
    }
  }
}
</script>

第 9 行

let _fullName = ({ firstName, lastName }) => `${firstName} ${lastName}`

Getter 也可使用 explicit argument 傳入 model，如此就不必使用 this 存取 model，因此可改用 arrow function。

Conclusion

  • Computed 一般都只用到 getter，但別忘了也有 setter
  • 當使用 Computed Setter 時，computed 為 Object 而非 Function
  • 實務上建議使用 Computed Setter 時，將 getter function 與 setter function 定義在 component options 內，而將實際的 getter function 與 setter function 寫在 component options 外

Reference

Vue, Computed Setter

# Vue