Как добавить новый объект в Vuex и сохранить URL изображения через вызов API

Question

Я пытаюсь выучить vue, но я застрял при извлечении данных из API. Я использую DirectusSDK для извлечения данных из Directus, и я могу получить данные из API, но я не могу сохранить URL-адрес изображения в новом объекте в состоянии, может кто-нибудь сказать мне, как добавить новое свойство объекта в состояние и сохранить URL-адрес изображения на нем .

Вот мой код

store/modules/models.js
import users  from "./../users"

const state =
{
    models: []
};

const getters =
{
   allModels: state =>state.models

};

const actions =
{
    async fetchModels({ commit }) {
        const response = await users.getItems("models");
        //console.log(response.data);
        commit('_SET_MODELS', response.data);
    },
    async getPic({commit, state}){
        state.models.forEach((element)=>{
            if (element != null) {
                users.getFiles("/Files"+ element.image)
                    .then(response => {
                        element["imgURL"] = response.data[1].data
                    }).then(result => commit('_GET_PIC', result.data)).catch(error => {
                        throw new Error(`API ${error}`);
                    })
            }
        })
    }
 };

const mutations =
{
    _SET_MODELS: (state, models) => (state.models = models),
    _GET_PIC: (state, models) => (state.models = models)
};


export default {
    state,
    getters,
    actions,
    mutations,
}

успешно извлекается imgUrl Я внес изменения в свой код и он получает imgUrl из API, но теперь проблема в том, что он не получает права Вместо этого imgUrl присваивает ему случайное значение imgUrl.

Вот мой обновленный код:

import Vue from 'vue'
import users from "./../users"

const state = {
    models: [],
    picture: []
};

const getters = {
    allModels: state => state.models

};

const actions = {
    async fetchModels({commit}) {
        await users.getItems("models").then(
            response => {
                commit('_SET_MODELS', response.data)
            }
        );
        var arrModels = state.models;
        arrModels.forEach((element, index) => {
            users.getFiles("/Files/" + element.image)
                .then(response => {
                    //console.log(response.data[index].data.full_url);
                    commit('_SET_PIC', {
                        index: index,
                        imgURL: response.data[index].data.full_url
                    });

                })
        })

    }


};


const mutations = {
    _SET_MODELS: (state, models) => (state.models = models),
    _SET_PIC: (state, args) => {
        let index = args.index;
        let imgURL = args.imgURL;
        Vue.set(state.models[index], 'imgURL', imgURL);
    }


};

export default {
    state,
    getters,
    actions,
    mutations,
}

Answer 1

Согласно документации Vuex:

Предпочитаю инициализировать начальное состояние вашего магазина со всеми необходимыми полями заранее.

Но если вам нужно добавить некоторые свойства в объект Vuex , вы должны использовать set метод:

Vue.set(obj, 'newProp', 123)

См. официальную документацию: https://vuex.vuejs.org/guide/mutations.html#mutations -follow- vue -s-реактивность-правила

Ваш код будет выглядеть примерно так:

import Vue from 'vue';
import users from './../users';

const state = { models: [] };
const getters = { allModels: state => state.models };
const actions = {
  async fetchModels({ commit }) {
    const response = await users.getItems('models');
    commit('_SET_MODELS', response.data);
  },
  async getPic({ commit, state }) {
    state.models.forEach((element, index) => {
      if (element != null) {
        users
          .getFiles(`/Files${element.image}`)
          .then(response => {
            console.log('checking if the value is correct', response.data[1].data);
            commit('_SET_PIC', { index: index, imgURL: response.data[1].data });
          })
          // .then(result => commit('_GET_PIC', result.data)) // I don't understand this line
          .catch(error => {
            throw new Error(`API ${error}`);
          });
      }
    });
  },
};
const mutations = {
  _SET_MODELS: (state, models) => (state.models = models),
  // ADD THIS MUTATION
  _SET_PIC: (state, args) => {
    let index = args.index;
    let imgURL = args.imgURL;
    Vue.set(state.models[index], 'imgURL', imgURL);
  },
  _GET_PIC: (state, models) => (state.models = models),
};
export default { state, getters, actions, mutations };