Как я могу решить V-модель с Vuex? - PullRequest
Новая
       85

Как я могу решить V-модель с Vuex?

0 голосов
/ 12 октября 2019

Моя кодовая ручка выглядит так: https://codepen.io/skineur/pen/JjjGoEo

В кодовой ручке ошибки нет. Поскольку v-модель datepicker <v-date-picker v-model="foo.date">, она взята из data. Поэтому, если я выбираю дату в DatePicker, ошибка не появляется

Моя проблема в том, что datepicker v-модели не берется из data. Но это взято из state vuex store

Мой вычисляется для получения таких данных: 

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

Мой vuex store выглядит так: 

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

enter image description here

Как решить эту проблему?

Примечание:

  1. в коде ручки, ошибки нет. поскольку foos берется из data

  2. , существует ошибка, если foos берется из state vuex store. Ошибка появляется при выборе даты

1 Ответ

1 голос
/ 13 октября 2019

getters только для чтения, вы можете обновлять состояние хранилища только с помощью мутаций. Vuex не может автоматически сопоставить получатели с мутациями, потому что они определены пользователем.

Однако вы можете конкретно определить поведение 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);
    },
  },
}
...