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

请注意，我不希望与商店进行双向绑定，我希望我的反应式属性在商店值已更新时更新

如何实现？

Answer 1

由于不需要双向绑定，请尝试将值属性直接绑定到存储：

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

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

您可以使用 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

Vue ref/reactive 带默认值

Vue ref/reactive with default value

vue.js

vuex

vuejs3

vue-composition-api

vuex4