Vue.js状态更新失效？两种解决方法及props正确用法

2024-11-03 14:57:08

Vue.js 修改区块编辑状态的函数失效的解决方法

在 Vue.js 开发中，我们经常会遇到组件状态更新失效的问题。一个典型的场景就是类似笔记应用中，点击编辑按钮却无法切换到编辑状态。本文将针对这个问题，分析常见原因并提供解决方案。

响应式系统与数据更新

Vue.js 的核心在于其响应式系统。简单来说，就是数据变化会自动触发视图更新。但有时，由于代码的编写方式，可能会导致这种响应失效。我经常遇到的一个问题是，开发者直接修改了 props 或通过索引修改数组元素，而这些操作并不会触发 Vue 的响应式更新。

解决方案一：使用 ref

在你的代码中，redacting 变量被声明为 let redacting = undefined;。这仅仅是一个普通的 JavaScript 变量，Vue 并不会对其进行响应式追踪。使用 ref 可以创建一个响应式对象，让 Vue 能够追踪它的变化。

<script setup lang="ts">
import { ref } from 'vue';
// ... 其他代码

const redacting = ref(false); // 初始化为 false

// ... 其他代码
</script>

操作步骤：

导入 ref：import { ref } from 'vue';
使用 ref 创建响应式变量：const redacting = ref(false);
在模板中，v-if 和 v-else 块依然使用 redacting，Vue 会自动解包 ref 值。

这个方法通过将 redacting 转换为响应式引用，确保了 Vue 能够追踪它的变化，从而正确地更新视图。

解决方案二：使用 reactive

如果需要处理多个相关状态，可以使用 reactive 创建一个响应式对象。

<script setup lang="ts">
import { reactive } from 'vue';
// ... 其他代码

const state = reactive({
  redacting: false,
  redTitle: props.title,
  redContent: props.content,
});

const startRedacting = () => {
  state.redacting = true;
};

const redactNote = async () => {
  // ...其他代码
  state.redacting = false;
  // ...其他代码
};

// ... 其他代码

</script>

<template>
  <div v-if="!state.redacting">
    <!-- ... -->
    {{ title }}
    {{ content }}
  </div>
  <div v-else>
      <input type="text" v-model="state.redTitle" ...>
      <textarea v-model="state.redContent" ...></textarea>
  </div>

  </template>

操作步骤：

导入 reactive: import { reactive } from 'vue';
创建响应式对象：const state = reactive({ redacting: false, ... });
在 startRedacting 和 redactNote 函数中，通过 state.redacting 来访问和修改 redacting 的值。
在模板中使用 state.redacting, state.redTitle, state.redContent。

使用reactive 可以更清晰地组织相关的状态变量。

props 的正确使用

修改 props 的值本身是不被推荐的，因为 props 应该作为父组件向子组件传递数据的单向通道。在你的代码中，redTitle 和 redContent 初始化使用了 props 的值，但在编辑过程中直接修改了它们。更合适的做法是使用本地数据进行编辑，并在保存时将修改后的值提交给父组件或服务器。这能更好地维护组件之间的关系，并避免潜在的数据冲突。

这个方法对你有帮助吗？你还有其他更好的建议吗？欢迎在评论区分享你的想法!