如何用 vuex 解决 v-model？

Posted 2023-02-23

【中文标题】如何用 vuex 解决 v-model？

【英文标题】：How can I solve v-model with vuex?

【发布时间】：2020-02-09 23:51:29

【问题描述】：

我的代码笔是这样的：https://codepen.io/skineur/pen/JjjGoEo

在 codepen 中，没有错误。因为 v-model datepicker <v-date-picker v-model="foo.date">，所以取自 data。所以如果我在日期选择器中选择日期，就没有错误

我的问题是 v-model 日期选择器不是取自 data。不过取自statevuex store

我计算得到这样的数据：

export default 
    ...
    computed: 
        ...mapGetters(["foos"])
    

我的 vuex 商店是这样的：

import api from "../../services/api";

const state = 
  foos: []
;
// getters
const getters = 
  foos: state => state.foos,


// actions
const actions = 
  async getFoos( commit , payload) 
    commit("setLoading", true);
    let result = await api.getFoos(payload);
    const items = result.data;

    for (let i = 0; i < items.length; i++) 
        let payload = 
          id: items[i].id,
        ; 
        let resultSchedule = await api.getFooSchedule(payload);

        items[i].schedule = resultSchedule.data
        items[i].date = new Date().toISOString().substr(0, 10)
    

    commit("setDataFoo",  items: items );
  
;

// mutations
const mutations = 
  setDataFoo(state,  items ) 
    state.foos = items;
  
;

export default 
  state,
  getters,
  actions,
  mutations
;

如果 foos 从 state 中取出并执行，则存在错误：

do not mutate vuex store state outside mutation handlers

我该如何解决这个问题？

注意：

在codepen中，没有错误。因为 foos 取自 data

如果 foos 从 state vuex 存储中获取，则存在错误。选择日期时出现错误

【问题讨论】：

见vuex.vuejs.org/guide/forms.html。

@ceejayoz 是的。但我需要一个具体的答案

【参考方案1】：

getters 是只读的，您只能通过突变更新存储状态 Vuex 无法自动匹配 getter 到突变，因为它们是用户定义的。

但是，您可以专门定义 get 和 set 的行为：

computed: 
  ...mapGetters(['foos']),
  // Define what happens when we get and set `date`
  date: 
    get() 
      return this.$store.state.foos.date;
    ,
    set(newValue) 
      return this.$store.commit('foos/setDate', newValue);
    ,
  ,

【讨论】：

foos 是数组。所以无法拨打foos.date