Composition API中如何在computed内编写get()和set()函数

Composition API 原生支持和Options API完全一致的可写计算属性能力，不需要拆分两个独立的computed变量。

computed 方法支持两种传参方式：

• 传入单个getter函数：得到只读的计算属性，也是最常用的写法
• 传入包含get、set方法的配置对象：得到可读写的计算属性，和你在Options API中写的效果完全一致

你之前尝试拆分colorCodeGet、colorCodeSet两个独立变量的写法是无效的，两个computed互不关联，最终返回的colorCode也未定义，正确写法参考如下：

import { computed } from 'vue'

export default {
  setup() {
    const colorCode = computed({
      // getter逻辑和你之前写的一致
      get() {
        return $store.state.colorCode
      },
      // setter接收计算属性被赋值时传入的新值作为参数
      set(newValue) {
        // 内部主动触发依赖更新，比如提交Vuex mutation修改状态
        $store.commit('updateColorCode', newValue)
      }
    })

    return { colorCode }
  }
}

如果使用<script setup>语法糖，写法更简洁：

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex' // Pinia使用逻辑一致
const store = useStore()

const colorCode = computed({
  get: () => store.state.colorCode,
  set: (newVal) => store.commit('setColorCode', newVal)
})
</script>

使用注意事项：

• set方法不会自动修改get返回的值，必须在set内部主动执行原始状态的更新逻辑（修改ref/reactive值、提交store状态更新等），计算属性的返回值才会同步变化
• 这类可写计算属性行为和普通响应式变量一致，可以直接用在v-model等需要双向绑定的场景

内容的提问来源于stack exchange，提问作者Mishen Thakshana