fix(devtools): make settable getters (computed) editable (#3151)

* fix: make settable getters (computed) editable

* refactor(devtools): detect writable computed at runtime

Replace the _editableComputed bookkeeping set with a runtime
isReadonly() check on the raw computed ref. Also drop the dead
edit handlers for the root inspector and component inspector,
whose getters entries are not editable.

* chore: computed with setter in playground

---------

Co-authored-by: Waradu <waradu@outlook.com>

Author: posva

packages/pinia/src/devtools/formatting.ts

@@ -1,7 +1,7 @@
 import { MutationType, StoreGeneric } from '../types'
 import { DebuggerEvent } from 'vue'
 import { Pinia } from '../rootStore'
-import { isPinia } from './utils'
+import { isPinia, isWritableComputed } from './utils'
 
 // types from devtools-api
 interface StateBase {
@@ -153,7 +153,7 @@ export function formatStoreForInspectorState(
   // avoid adding empty getters
   if (store._getters && store._getters.length) {
     state.getters = store._getters.map((getterName) => ({
-      editable: false,
+      editable: isWritableComputed(store, getterName),
       key: getterName,
       value: store[getterName],
     }))

packages/pinia/src/devtools/plugin.ts

@@ -23,7 +23,7 @@ import {
   PINIA_ROOT_ID,
   PINIA_ROOT_LABEL,
 } from './formatting'
-import { isPinia, toastMessage } from './utils'
+import { isPinia, isWritableComputed, toastMessage } from './utils'
 
 // timeline can be paused when directly changing the state
 let isTimelineActive = true
@@ -262,10 +262,12 @@ export function registerPiniaDevtools(app: App, pinia: Pinia) {
           const { path } = payload
 
           if (!isPinia(inspectedStore)) {
-            // access only the state
+            // access only the state unless it's a custom property or a
+            // writable computed, which are set directly on the store
             if (
               path.length !== 1 ||
-              !inspectedStore._customProperties.has(path[0]) ||
+              (!inspectedStore._customProperties.has(path[0]) &&
+                !isWritableComputed(inspectedStore, path[0])) ||
               path[0] in inspectedStore.$state
             ) {
               path.unshift('$state')

packages/pinia/src/devtools/utils.ts

@@ -1,4 +1,6 @@
+import { isReadonly, isRef, toRaw } from 'vue'
 import { Pinia } from '../rootStore'
+import { StoreGeneric } from '../types'
 
 /**
  * Shows a toast or console.log
@@ -24,3 +26,12 @@ export function toastMessage(
 export function isPinia(o: any): o is Pinia {
   return '_a' in o && 'install' in o
 }
+
+/**
+ * Detects if a store getter is a writable computed (has a setter) so it can be
+ * edited from devtools.
+ */
+export function isWritableComputed(store: StoreGeneric, key: string): boolean {
+  const rawProp = toRaw(store)[key]
+  return isRef(rawProp) && !isReadonly(rawProp)
+}

packages/playground/src/stores/counterSetup.ts

@@ -14,7 +14,12 @@ export const useCounter = defineStore('counter-setup', () => {
   const injected = inject('injected', 'fallback value')
   console.log('injected (should be global)', injected)
 
-  const double = computed(() => state.n * 2)
+  const double = computed<number>({
+    get: () => state.n * 2,
+    set: (v) => {
+      state.n = v / 2
+    },
+  })
 
   function increment(amount = 1) {
     if (typeof amount !== 'number') {