如何使用vuex解决v模型？

Question

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

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

我的问题是没有从data取得v模型datepicker。但这是来自state vuex商店

我计算得出这样的数据：

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从状态中获取并执行，则存在错误：

do not mutate vuex store state outside mutation handlers

我该如何解决这个问题？

注意：

在码本中的

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

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

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