如何用 vuex 解决 v-model？

Question

我的代码笔是这样的：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

我该如何解决这个问题？

注意：

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

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

Answer 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);
    },
  },
}