用 event 来准备传给後端的 data

今天来将画面做好，我们面对的资料长这样。

需求: 通常一个使用者的 form 表单是用在新增/编辑资料上面。

我们用一个小小的例子，一步一步的完整带你看看，除了做出功能之外，又要怎麽样优雅的满足这个表单的需求。

{
  "createdAt": "2021-09-28T13:56:56.181Z",
  "name": "Elizabeth Mitchell",
  "avatar": "https://cdn.fakercloud.com/avatars/sebashton_128.jpg",
  "id": "1"
}

先做一个表单

通常 id, createdAt 并不会编辑或显示，所以就不用管它。
所以只要显示 name 和 avatar 两个栏位。

如图

程序码如下

src/views/User.vue

在原本的 <pre>{{ $store.getters.user }}</pre> 下面加上 name 栏位

• value: 就将 object.name 的做法将值放进 <input /> 显示
• @input: 把 <input /> 吐出来的值，用 immutable 的方式更新到 data (而不是 data.name)
  • 因为是用原生写法，所以值在 event.target.value

<div>
  <pre>{{ $store.getters.user }}</pre>
  <form @submit.prevent="onSubmit">
    <p><label>name: <br />
      <input type="text"
        :value="data.name"
        @input="$store.commit('user', {
          ...data,
          name: $event.target.value
        })"></label>
    </p>
    <input type="submit" value="送出">
  </form>
</div>

这一步是让上述的 immutable 看起来不会这麽复杂用的 (暂时是这样)

之後搬进 component 它就变 props 了

export default {
  name: 'User',
  computed: {
    data() {
      return this.$store.getters.user;
    }
  }
};

大多数的文字与数字栏位都是这样处理的，在每一次触发 @input 的过程中，就应该整理好要送到 POST 的物件模样。

图片

程序码加一段

  <p>
    <img :src="avatarSrc" alt=""><br />
    <input
      type="file"
      @input="updateFile">
  </p>
  <!--   原本的 name 上面加一段 -->
  <p><label>name: <br />
    <input type="text"
      :value="data.name"
      @input="$store.commit('user', {
        ...data,
        name: $event.target.value
      })"></label>
  </p>
  <input type="submit" value="送出">

使用 <input type="file" > 用来替换新的图片。

export default {
  name: 'User',
  data(){
    return {
      new_avatar: null,
    }
  },
  computed: {
    data() {
      return this.$store.getters.user;
    },
    avatarSrc() {
      return this.new_avatar || this.data.avatar;
    }
  },
  methods: {
    updateFile(event){
      const file = event.target.files.item(0)
      this.new_avatar = URL.createObjectURL(file);
      this.$store.commit('file', file);
    },
    onSubmit() {
      this.$store.dispatch('createUser', this.$store.getters.user);
    }
  }
};

avatarSrc: 用来更新预览图片的连结

updateFile: 用来储存目前上传到浏览器的二进制资料(图档)，并且将它转成可预览的路径。

onSubmit: 在此送出 createUser 的 API。若需要把错误显示成 modal 则需要在这 (画面) 进行错误处理。

用 event 来准备 POST 的资料

POST /user

request body

{
  "name": "chris",
  "avatar": "https://fakeimg.pl/300/"
}

我们可以看见资料长这样。

在此我们直接送的资料如果有多余的栏位，有时候也是可以的。
所以，要直接把 $store.getters.user 送出去。

一般栏位需要的文字、数字资料，都可以像是这个 name 的例子，直接修改 vuex 的时候，同时整理成要传给後端的资料。

在 dispatch 的时候将 $store.getters.user 转成需要的栏位，不会传送多余的栏位。

千千万万不要在 submit 的时候跑复杂逻辑整理资料。
因为这样会造成 debug 的逻辑变多而已。