无法让 v-model 与 Composition API 和 Vuex 一起工作

Question

我已经阅读了 Whosebug 和其他网站上的几篇文章，但仍然无法弄清楚我的情况出了什么问题。

我正在按照组合 api 方法构建一个应用程序，并使用一个名为 modelStartDate 的变量（我在 2022 年 1 月 3 日启动）。这是我的商店的样子：

import { createStore } from 'vuex'

export default createStore({
  state: {
    modelStartDate: new Date(2022, 0, 3)
  },
  mutations: {
    modelStartDateMutation(state, newDate) {
      state.modelStartDate = newDate
    }
  },
  actions: {
  },
  getters: {
  },
  modules: {
  }
})

在相关的 Vue 文件中，我有以下代码片段：

<template>
      <nav class="left-bar">
      <div class="block" id="modelStartDate">
        <label>Model start date</label>
        <input type="date" v-model="modelStartDateProxy" />
      </div>

      <p>{{ modelStartDate }}</p>
      
    </nav>
</template>

<script>
import { ref } from '@vue/reactivity'
import { useStore } from 'vuex'
import { computed } from '@vue/runtime-core'
export default {
    setup() {
        
        const store = useStore()
        const modelStartDateProxy  = computed({
            get: () => store.state.modelStartDate,
            set: (newDate) => store.commit("modelStartDateMutation", newDate)
        })
        const modelStartDate = store.state.modelStartDate

        return { modelStartDateProxy, modelStartDate }
    }


}
</script>

当我运行页面时，段落标签打印了正确的日期，但是用户可以更改日期的输入标签是空的（我原以为 2022 年 1 月 3 日是预选中）。更改日期后，应用程序似乎没有任何变化。我没有收到任何错误。知道我做错了什么吗？

此外，我是否可以访问商店的 modelStartDate 状态而不必在 vue setup() 部分中单独（冗余地？）定义它？

Answer 1

html元素输入returns一个字符串：“YYYY-MM-DD”。因此，您需要语法 new Date(value)

看看this playground

<template>
  <label>Model start date</label>
  <input type="date" v-model="modelStartDateProxy" />
  <p>{{ modelStartDateProxy }}</p>
</template>

<script>
import { store } from './store.js' //mock-up store
import { ref, computed } from 'vue'
export default {
  setup() {
    const modelStartDateProxy = computed({
      get: () => store.state.modelStartDate,
      set: (newDate) => store.commit(newDate) // Use real Vuex syntax
    })
    return { modelStartDateProxy }
  }
}
</script>

//Mock-up Store (not real vuex)
import {reactive} from 'vue'
export const store = reactive({
  state: {
    modelStartDate: new Date(2022, 0, 3)
  },
  commit: (value) => store.state.modelStartDate = new Date(value) // new Date(value)
})

Answer 2

首先，我不知道你看的是哪个教程。但对我来说，问题就在这里：

const modelStartDateProxy = computed({
    get: () => store.state.modelStartDate,
    set: (newDate) => store.commit("modelStartDateMutation", newDate)
})

const modelStartDate = store.state.modelStartDate

片段

const modelStartDateProxy = computed({
    get: () => store.state.modelStartDate,
    set: (newDate) => store.commit("modelStartDateMutation", newDate)
})

我觉得很奇怪。

store.state.modelStartDate 的副本。干
<p>{{ modelStartDate }}</p> 从 const modelStartDate = store.state.modelStartDate 渲染数据。但是数据只分配了一次。因此，新值未在输入时呈现已更改。解决方案：

const modelStartDate = computed(() => store.state.modelStartDate);

你可以看看这个playground。

无法让 v-model 与 Composition API 和 Vuex 一起工作

Can't get v-model work with Composition API and Vuex

vue.js

vuex

vue-composition-api