Ошибка в v-on обработчике: «Ошибка типа: невозможно прочитать свойство« emailAddress »неопределенного» VUEX - PullRequest
Новая
       5

Ошибка в v-on обработчике: «Ошибка типа: невозможно прочитать свойство« emailAddress »неопределенного» VUEX

0 голосов
/ 13 января 2020

У меня проблемы с выяснением этого в магазине Vuex. У меня есть созданная форма подписки, чтобы можно было ввести ваш адрес электронной почты, и я хочу отправить запрос к API бэкэнда, но данные не отображаются, когда я его консоль.log. Это только console.logs элемент, который был отправлен в хранилище, и когда я пытаюсь преобразовать элемент в state.emailAddress и пытаюсь получить данные, которые на POST я получаю пустой объект. введите описание изображения здесь 

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    pizzaItems: [],
    shopCart: [],
    choosePizzaSize: [],
    total: 0,
    deliveryCharge: 0,
    emailAddress: '',
  },
  getters: {
    deliveryCharge: state => state.deliveryCharge,
    pizzaItems: state => state.pizzaItems,
    shopCart: state => state.shopCart,
    choosePizzaSize: state => state.choosePizzaSize,
    checkOut: state => state.total,
  },
  mutations: {
    Add_To_Cart(state, item) {
      const shopItem = state.shopCart.find(x => x.id === item.id && x.size === item.size);
      if (shopItem) {
        shopItem.count += item.count;
      } else {
        state.shopCart.push(item);
      }
    },
    Price_Total(state, total) {
      state.total = total;
    },
    fetchProducts(state, products) {
      state.pizzaItems = products;
    },
    fetchPizzasize(state, size) {
      state.choosePizzaSize = size;
    },
    free_Shipping(state, freeshipping) {
      state.deliveryCharge = freeshipping;
    },
    subScribeMail(state, item) {
      state.emailAddress = item;
    },
  },
  actions: {
    fetchData({ commit }) {
      axios.get('http://localhost:3000/saltbageproducts').then((response) => {
        commit('fetchProducts', response.data.products);
        commit('fetchPizzasize', response.data.pizzasize[0].pizzaSize);
      })
        .catch((err) => {
          console.log(err);
        });
    },
    addTocart(context, item) {
      context.commit('Add_To_Cart', item);
    },
    priceCalculation(context, item) {
      context.commit('Price_Total', item);
    },
    changeFreeshippingStatus(context, shipping) {
      context.commit('free_Shipping', shipping);
    },
    emailCheckUp(context, item, state) {
      context.commit('subScribeMail', item);
      axios.post('http://localhost:3000/saltbagehome', {
        email: state.emailAddress,
      }).then((reponse) => {
        console.log(reponse.data);
      }).catch((err) => {
        console.log(err);
      });
    },
  },
  modules: {
  },
});

1 Ответ

0 голосов
/ 13 января 2020

Запись Документация Vuex ;

Регистрация действий в магазине. Функция-обработчик получает объект контекста, который предоставляет следующие свойства: 

{
  state,      // same as `store.state`, or local state if in modules
  rootState,  // same as `store.state`, only in modules
  commit,     // same as `store.commit`
  dispatch,   // same as `store.dispatch`
  getters,    // same as `store.getters`, or local getters if in modules
  rootGetters // same as `store.getters`, only in modules
}

, а также получает второй аргумент полезной нагрузки, если он есть.

Затем в вашем первом параметре вашего action у вас есть контекст vuex, теперь для доступа к контексту vuex внутри вашего действия должно быть: 

emailCheckUp(context, item) { ... }

вместо 

emailCheckUp(context, item, state) { ... }

, просто: 

emailCheckUp(context, item) {
  context.commit('subScribeMail', item);
  ...
  email: context.state.emailAddress,
  ...
}

На практике они часто используют аргумент ES2015 деструктурирование , чтобы немного упростить код: 

emailCheckUp({commit, state}, item) {
  commit('subScribeMail', item);
  ...
  email: state.emailAddress,
  ...
}
...