javascript - solid-js中如何只监听某个对象的某个值？

Question

const App: Component = () => {
  const [obj, setObj] = createSignal({
    name: "John",
    age: 30,
  })

  createEffect(
    on(
      () => obj().name,
      (value) => {
        console.log("name", value)
      }
    )
  )
return ()=>(<button onClick={()=> setObj(obj=> ({ ...obj, age: obj.age + 1}))}>+</button>)
}

当我更改age时，createEffect也会被触发，我只想监听name，类似于watch 在 Vue3 中。

function setup(){
  const obj = reactive({
    name: "John",
    age: 30,
  })
  watch(()=> obj.name,(value)=>{ console.log("name", value) })
}

有什么好的想法吗？

Answer 1

SolidJS 不会跟踪信号对象的各个属性。

此外，每次解构对象时值发生变化时，您都会覆盖该对象(又名。{...obj, })。

如果您希望 createEffect 跟踪您的个人属性，请尝试 createStore。

这是使用 createStore 而不是 createSignal 编写的示例

import {createStore} from 'solid-js/store'; // <- This is very important

const App: Component = () => {
  const [obj, setObj] = createStore({
    name: "John",
    age: 30,
  })

  createEffect(() => console.log(obj.name));

  return (<button onClick={setObject('age', obj.age + 1)}>+</button>)
  )
}

如果你运行这个例子，你会看到 console.log(obj.name) 只会运行一次，这是因为 solid-js 会在将它们保存在一个createStore