Vue 3 响应式 prop 如何更新 Store？
2024-03-01 20:35:48
在开发 Vue 3 应用的过程中，我们常常会遇到需要将组件的输入值与 Vuex 或者其他状态管理库同步的问题。例如，在一个表单组件中，用户的输入需要实时更新到应用的状态中，以便其他组件能够获取到最新的数据。
一种常见的做法是使用 @input 事件监听器来捕捉用户的输入，并在事件回调函数中更新 store 中对应的值。但是，如果我们直接将 prop 的值赋值给 store 中的变量，可能会遇到数据不同步的问题。这是因为 prop 的值是单向传递的，组件内部对 prop 的修改并不会影响到父组件或者 store 中的值。
为了解决这个问题，我们可以利用 Vue 3 的响应式系统。具体来说，我们可以使用 ref 来创建一个响应式的变量，并将 prop 的值赋给这个变量。然后，在 @input 事件的回调函数中，我们更新这个响应式变量的值，从而触发 store 中对应值的更新。
下面我们来看一个具体的例子。假设我们有一个 Input.vue 组件，它接收一个 value prop，用于显示输入框的初始值。我们希望在用户输入时，将输入框的值同步到 store 中的 inputValue 变量。
// Input.vue
<template>
<input type="text" :value="inputValue" @input="onInputChange">
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';
const props = defineProps({
value: {
type: String,
required: true,
},
});
const store = useStore();
const inputValue = ref(props.value);
onMounted(() => {
// 初始化时将 prop 的值赋给响应式变量
inputValue.value = props.value;
});
const onInputChange = (event) => {
// 更新响应式变量的值
inputValue.value = event.target.value;
// 更新 store 中的值
store.commit('updateInputValue', inputValue.value);
};
</script>
在这个例子中，我们使用了 ref 创建了一个名为 inputValue 的响应式变量，并在 onMounted 钩子函数中将 prop 的值赋给它。在 onInputChange 回调函数中，我们更新 inputValue 的值，并通过 store.commit 方法更新 store 中的 inputValue 变量。
通过这种方式，我们就实现了将组件的输入值与 store 同步的功能。当用户输入时，inputValue 的值会发生变化，从而触发 store 中 inputValue 变量的更新。其他组件可以通过订阅 store 中的 inputValue 变量来获取最新的输入值。
需要注意的是，如果 store 中的 inputValue 变量也是一个响应式变量（例如使用 ref 创建），那么我们不需要手动调用 store.commit 方法，只需要更新 inputValue 的值即可。这是因为 Vue 3 的响应式系统会自动追踪依赖关系，并在依赖项发生变化时触发更新。
常见问题解答
-
为什么不直接在
@input事件回调函数中更新 store 中的值？- 因为 prop 的值是单向传递的，组件内部对 prop 的修改并不会影响到父组件或者 store 中的值。
-
为什么需要使用
ref创建响应式变量？- 因为只有响应式变量的值发生变化时，才会触发 Vue 3 的响应式系统进行更新。
-
如果 store 中的变量不是响应式变量，该怎么办？
- 需要手动调用
store.commit方法来更新 store 中的值。
- 需要手动调用
-
这种方法可以用于其他类型的表单元素吗？
- 是的，这种方法可以用于任何需要将输入值与 store 同步的表单元素，例如
textarea、select等。
- 是的，这种方法可以用于任何需要将输入值与 store 同步的表单元素，例如
-
除了使用
ref，还有其他方法可以实现输入值与 store 的同步吗？- 可以使用
computed属性来实现，或者使用v-model指令结合computed属性来实现。
- 可以使用
