Question

我有一个简单的 Vue 表单组件，它有一些文本输入：

<input type="text" class="form-control" v-model="amount">

此文本输入具有以下默认值：

mounted() {
    this.$store.commit('refreshBalance')
  },

  data() {
      return {
        amount: this.$store.getters.baseBalance,
      };
  },

我的代码的问题是 amount 的值总是相同的，如果我改变那个 Vuex 存储的值，它不会改变。

因此，例如，如果我打开页面时 this.$store.getters.baseBalance 等于 10，而我将其更改为 20，则该输入字段的默认值将始终为 10。有什么办法可以使它反应性？提前致谢。

Answer 1

将其更改为计算属性，并使用 get 和 set 方法。您还需要在您的商店中创建一个操作来更新 baseBalance，我在下面的代码中将其命名为 SET_BALANCE。

当您更新输入时，set 方法运行，该方法将 amount 的值提交到存储通过。 SET_BALANCE。

<input type="text" class="form-control" v-model="amount">

...

computed: {
  amount: {
    set(amount) {
      this.$store.commit('SET_BALANCE', { amount })
    },
    get() {
      return this.$store.getters.baseBalance
    }
  }
}

Vue - 动态更改默认输入文本值

1 个答案: