Добавление результата вызова Ax ios в State - PullRequest
Новая
       7

Добавление результата вызова Ax ios в State

0 голосов
/ 31 марта 2020

Это очень простой c вопрос, но я никуда не уйду ...

Делаю простую корзину с Vue и Vuex. У меня были продукты, жестко запрограммированные в состоянии, но теперь я пытаюсь сделать вызов топора ios и добавить этот результат в состояние. У меня есть функция ax ios, и я пытаюсь загрузить функцию и добавить результат JSON в массив all.

Как поместить результат loadItems () в массив all? Спасибо

РЕДАКТИРОВАТЬ: я обновил весь мой файл Vuex. 

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import * as types from './mutation-types'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

// axios call
const api = {
  loadItems() {

    // Init variables
    var self = this
    var app_id = "asdfasf";
    var app_key = "asdfasfaf";
    this.items = []
    axios.get(
      "https://api.airtable.com/v0/"+app_id+"/Products",
      { 
        headers: { Authorization: "Bearer "+app_key } 
      }
    ).then(function(response){
      self.items = response.data.records.map((item)=>{
        return {
            id: item.id,
            ...item.fields
        }
      })
    }).catch(function(error){
      console.log(error)
    })
  }
}

// initial state
const state = {
  added: [],
  all: []
}

// getters
const getters = {
    allProducts: state => state.all, // would need action/mutation if data fetched async
    getNumberOfProducts: state => (state.all) ? state.all.length : 0,
    cartProducts: state => {
        return state.added.map(({ id, quantity }) => {
            const product = state.all.find(p => p.id === id)

            return {
                name: product.name,
                price: product.price,
                quantity
            }
        })
    }
}

// actions
const actions = {
    addToCart({ commit }, product){
        commit(types.ADD_TO_CART, {
            id: product.id
        })
    },
    removeFromCart({ commit }, product){
        commit(types.REMOVE_FROM_CART, {
            id: product.id
        })
    }
}

// mutations
const mutations = {

    [types.ADD_TO_CART] (state, { id }) {
        const record = state.added.find(p => p.id === id)

        if (!record) {
          state.added.push({
            id,
            quantity: 1
          })
        } else {
          record.quantity++
        }
      },
    [types.REMOVE_FROM_CART] (state, { id }) {
        const record = state.added.find(p => p.id === id)

        if (!record) {
          state.added.pop({
            id,
            quantity: 1
          })
        } else {
          record.quantity--
        }
      },
}

// one store for entire application
export default new Vuex.Store({
    state,
    strict: debug,
    getters,
    actions,
    mutations
})

1 Ответ

0 голосов
/ 31 марта 2020

Это небольшой подход к вашей цели:

Вы можете получить доступ с помощью state.yourStateNameVariable или, что лучше, сделать геттер и зафиксировать получение / установку значения из этого состояния.

Наблюдения: [ types.ADD_TO_CART] не подходит для коммита, может быть addToCart и removeFromCart?

Вам не нужно сохранять в элементах свой ответ от ax ios, вы можете сразу после разрешения отправить все состояния с состоянием. all = yourdata или лучше, добавьте мутацию 

setAllData({ state }, data){
    state.all = data
}

Я не исправил весь ваш код, но вы подходите: 

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import * as types from './mutation-types'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
state:{
    added: [],
  all: [
    {
      id: 'cc919e21-ae5b-5e1f-d023-c40ee669520c',
      name: 'COBOL 101 vintage',
      description: 'Learn COBOL with this vintage programming book',
      price: 399
    },
    {
      id: 'bcd755a6-9a19-94e1-0a5d-426c0303454f',
      name: 'Sharp C2719 curved TV',
      description: 'Watch TV like never before with the brand new curved screen technology',
      price: 1995
    },
    {
      id: '727026b7-7f2f-c5a0-ace9-cc227e686b8e',
      name: 'Remmington X mechanical keyboard',
      description: 'Excellent for gaming and typing, this Remmington X keyboard ' +
        'features tactile, clicky switches for speed and accuracy',
      price: 595
    }
  ]
},
getters: {
 allProducts: state => state.all, // would need action/mutation if data fetched async
    getNumberOfProducts: state => (state.all) ? state.all.length : 0,
    cartProducts: state => {
        return state.added.map(({ id, quantity }) => {
            const product = state.all.find(p => p.id === id)

            return {
                name: product.name,
                price: product.price,
                quantity
            }
        })
    }
},
mutations: {
setAllData({ state }, data){
    state.all = data
},
 [types.ADD_TO_CART] ({ state }, id) {
        const record = state.added.find(p => p.id === id)

        if (!record) {
          state.added.push({
            id,
            quantity: 1
          })
        } else {
          record.quantity++
        }
      },
    [types.REMOVE_FROM_CART] ({ state }, id) {
        const record = state.added.find(p => p.id === id)

        if (!record) {
          state.added.pop({
            id,
            quantity: 1
          })
        } else {
          record.quantity--
        }
      }
},
actions:{
  loadItems({getters, commit}, somethingYouReceive) {

    // Init variables
    var self = this
    var app_id = "adsfasfasgag";
    var app_key = "agasdgagasgasg";
    this.items = []
    axios.get(
      "https://api.airtable.com/v0/"+app_id+"/Products",
      { 
        headers: { Authorization: "Bearer "+app_key } 
      }
    ).then(function(response){
      commit('setAllData',response.data.records.map((item)=>{
        return {
            id: item.id,
            ...item.fields
        }
      })
    }).catch(function(error){
      console.log(error)
    })
  },
   addToCart({ commit }, product){
        commit(types.ADD_TO_CART, {
            id: product.id
        })
    },
    removeFromCart({ commit }, product){
        commit(types.REMOVE_FROM_CART, {
            id: product.id
        })
    }
}
})
...