useImmer

2023年05月28日

柏拉文

越努力，越幸运

一、认识

---

二、定义

---

import { produce } from "immer";
import { shallowRef } from "vue";

export function useImmer(baseState: any) {
  const state = shallowRef(baseState);
  const update = (updater: any) => {
    console.log(state.value)
    state.value = produce(state.value, updater);
  };

  return [state, update];
}

三、使用

---

<template>
  <div>
    <input
      type="text"
      :value="obj.b.c.d"
      @change="($event) => handleChange($event)"
    />
  </div>
</template>

<script setup lang="ts">
import { useImmer } from "./combinatorial/useImmer";

const [obj, setObj] = useImmer({
  a: "",
  b: {
    c: {
      d: "",
    },
  },
});

const handleChange = (event: any) => {
  const {
    target: { value },
  } = event;
  setObj((draft: any) => {
    console.log(draft)
    draft.b.c.d = value;
  });
  console.log(obj.value.b.c.d)
};
</script>