如果计算属性 vuejs 中没有任何更改，如何将旧值传递给 setter？

Question

我正在学习使用 Vuejs，所以不要介意我！

我已经在计算属性中设置了 getter 和 setter，并在带有 v-model 的表单中使用它。我的问题是，如果我在v-text-field 中更改某些内容，那么我可以发出patch 请求，但如果我不更改任何内容并将其保留为我从状态中获得的值，那么我将无法发出补丁请求表示该字段可能不为空。

如果我不想更改字段内的任何内容，如何将默认值（我从状态中获得的值）保留给 v-text-field 并能够发出补丁请求。

我的 vue 组件.vue

<template>
  <div id="update-post">
    <v-dialog v-model="updatePostModal" max-width="600">
      <v-card class="px-5 py-5">
        <v-form ref="form" v-on:submit.prevent="update">
          <v-text-field
            type="text"
            v-model="title" <---
            label="Title"
            required
          ></v-text-field>
        </v-form>
        <v-card-actions>
          <v-btn color="green darken-1 white--text" @click="update">
            Update
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { getAPI } from "../axios-base";

export default {
  name: "UpdatePostModal",
  data() {
    return {
      updateTitle: null,
    };
  },
  computed: {
    title: {
      get() {
        var title = this.$store.state.APIData.postTitle;
        return title;
      },
      set(value) {
        this.updateTitle = value;
      },
    },
  },
methods: {
    update: function() {
      var id = this.$store.state.APIData.postID;
      getAPI
        .patch(
          `/api/posts/${id}/`,
          {
            title: this.updateTitle,
          },
          {
            headers: {
              Authorization: `Bearer ${this.$store.state.accessToken}`,
            },
          }
        )
    },
};
</script>

Answer 1

您似乎有一些错误。第一个，在这里：

.patch(
  `/api/posts/${id}/`,
  {
    title: this.updateTitle,
  },

您在请求中使用了data 中定义的变量。您应该改用 computed 属性，所以它应该是：

.patch(
  `/api/posts/${id}/`,
  {
    title: this.title,
  },

接下来，你使用状态的方式也不对。如果您正在从状态读取computed 属性，您也应该始终通过状态读取set。否则，随着应用程序的增长，您最终会遇到一些意想不到的行为。为此，您可以执行以下操作：

get() {
    // read from the state
},
set(value) {
    // create an action to update the post title in the state

    store.dispatch(
        'updatePostTitle',
        value
    );
}

如果您仍然不想这样做，作为一种解决方法，您可以像这样解决您的问题（记住要解决上面提到的第一个问题）：

computed: {
    title: {
        get() {
            return this.updateTitle || this.$store.state.APIData.postTitle;
        },
        set(value) {
            this.updateTitle = value;
        },
    },
},