Vue ref/reactive 与默认值

Question

我正在使用 Vue3 组合 API。我有一个需要与商店同步的输入字段，以防商店中的数据发生变化，应该更新它

代码

const store = useStore()
const savedAge = computed(() => store.state.profile.age)
// The saved is async and can be updated at anytime in store 

const age = ref(savedAge.value)

<!-- template -->
<input v-model="age" /> // here the age is null event if savedAge value has updated in store

请注意，我不希望通过两种方式与 store 绑定，如果 store 值已更新，我希望我的响应属性更新

我如何做到这一点？

Answer 1

您可以使用watchEffect() 在本地副本更改时使用store.state.profile.age 更新它。这将允许您将本地副本的更改与存储区隔离，直到您准备好提交：

<template>
  <input v-model="age">
  <button @click="save">Save</button>
</template>

<script>
import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const age = ref(0)
    const store = useStore()

    watchEffect(() => age.value = store.state.profile.age)

    return {
      age,
      save: () => store.commit('SAVE_AGE', age.value),
    }
  }
}
</script>

demo

Answer 2

您可以:value 和@change，但最好了解您想要实现的目标。

const store = useStore();
const ageChange = (e)=>{doSomethingWith(e.target.value)};
return {store, ageChange};

<!-- template -->
<input :value="store.state.profile.age" @change="ageChange"/> 

Answer 3

由于不需要双向绑定，尝试直接绑定value属性到store：

<input :value="store.state.profile.age" />