Управление двумя состояниями в одном действии - vuex

Question

Я бился головой об этом, но не могу понять. У меня есть два API, сообщающие о двух наборах данных (блокировка и рабочие станции). В API lockboxes есть набор агентств с recordId, которым я должен манипулировать. API рабочих станций - это основная коллекция, которая назначит одно из этих агентств (блокировок) для переключения на рабочую станцию, отправив в серверную часть lockboxes.recordId и workstation.recordId в теле.

Мой магазин выглядит следующим образом

import { axiosInstance } from "boot/axios";

export default {
  state: {
    lockboxes: [],
    workstation: []
  },

  getters: {
    allLockboxes: state => {
      return state.lockboxes;
    },
    singleWorkstation: state => {
      let result = {
        ...state.workstation,
        ...state.lockboxes
      };
      return result;
    }
  },

  actions: {
    async fetchLockboxes({ commit }) {
      const response = await axiosInstance.get("agency/subagency");
      commit("setLockboxes", response.data.data);
    },
    updateAgency: ({ commit, state }, { workstation, lockboxes }) => {
      const postdata = {
        recordId: state.workstation.recordId,
        agency: state.lockboxes.recordId
      };

      return new Promise((resolve, reject) => {
        axiosInstance
          .post("Workstation/update", postdata)
          .then(({ data, status }) => {
            if (status === 200) {
              resolve(true);
              commit("setWorkstation", data.data);
              commit("assignAgency", workstation);

              console.log(state);
            }
          })
          .catch(({ error }) => {
            reject(error);
          });
      });
    }
  },

  mutations: {
    setWorkstation: (state, workstation) => (state.workstation = workstation),
    assignAgency(workstation) { workstation.assign = !workstation.assign},
    setLockboxes: (state, lockboxes) => (state.lockboxes = lockboxes)
  }
};

Процесс:

Когда я выбираю блокировку из выпадающего списка и выбираю на рабочей станции тумблер, которому я хочу назначить lockbox тоже, я получаю, чтобы показать lockbox, но он исчезает при refre sh, потому что изменение произошло только во внешнем интерфейсе. Я на самом деле не передаю workstation.recordId или lockboxes.recordId в моем теле, как я надеялся. Он не читает состояние и не распознает recordId для любого из состояний (рабочая станция или блокировочные ящики).

, который возвращает console.log (Uncaught (в обещании) undefined)

Запрос 404 с пустой полезный груз в теле ({})

Даже мутация не запускается

template

toggleAssign(workstation) { 
  this.updateAgency(workstation); 
}

В какой-то момент у меня было то, что читало рабочую станцию .recordId до того, как я попытался объединить два состояния в геттере, но я так и не смог получить доступ к lockboxes.recordId. Как я могу получить доступ к двум состояниям, которые существуют в двух независимых API, чтобы я мог передать эти значения в теле запроса?

Если вам нужно больше кода, я могу его предоставить. Но так как у меня так много разных зависимостей, я решил, что не буду вас смущать и покажу вам только то, что вы просите увидеть. Заранее спасибо! Трудно быть единственным Vue разработчиком в этом месте. :(

Answer 1

Вы можете добавить debugger; в свой код вместо console.log, чтобы создать точку останова, и проверить все в инструментах отладки вашего браузера.

Я не могу помочь, потому что есть очень запутанные вещи:

state: {
  lockboxes: [],
  workstation: []
},

Итак, оба являются массивами.

Но тогда:

setWorkstation: (state, workstation) => (state.workstation = workstation),
assignAgency(workstation) { workstation.assign = !workstation.assign},

Кажется, что workstation не является массивом?

И также это, в получателях:

singleWorkstation: state => {
  let result = {
    ...state.workstation,
    ...state.lockboxes
  };
  return result;
}

Я не понимаю этого. Вы создаете объект с помощью ... массивов? Может быть, вы хотели сделать что-то вроде:

singleWorkstation: state => {
  let result = {
    ...state.workstation,
    lockboxes: [...state.lockboxes]
  };
  return result;
}

Если блокировка не является массивом? Но он назван как массив, он объявлен как массив. Однако у вас есть это:

const postdata = {
    recordId: state.workstation.recordId,
    agency: state.lockboxes.recordId
};

Так что, похоже, это не массив?

Наконец, в вашем методе updageAgency, и вот в чем проблема: l ie:

  return new Promise((resolve, reject) => {
    axiosInstance
      .post("Workstation/update", postdata)
      .then(({ data, status }) => {
        if (status === 200) {
          resolve(true);
          commit("setWorkstation", data.data);
          commit("assignAgency", workstation);

          console.log(state);
        }
      })
      .catch(({ error }) => {
        reject(error);
      });
  });

Первый аргумент .then для топора ios вызывается только в том случае, если код состояния 2xx или 3xx. Таким образом, ваш тест if (status === 200) является излишним, потому что ошибок там не будет. И если по другой причине у вас есть действительный код, отличный от 200, обещание никогда не заканчивается. reject никогда не вызывается, так как это не ошибка, равно как и resolve. Поэтому вы должны снять проверку с кода состояния.

Вы должны также позвонить resolve(true) после двух commits, а не до ...

Наконец ваша мутация assignAgency объявляется неверной:

assignAgency(workstation) { workstation.assign = !workstation.assign},

Мутация всегда принимает состояние в качестве первого параметра. Так что это должно быть либо:

assignAgency(state, workstation) { 
    state.workstation = {...workstation, assign: !workstation.assign}
},

Или

assignAgency(state) { 
    state.workstation = {...state.workstation, assign: !state.workstation.assign}
},

В зависимости от того, нужен ли вам аргумент workstation, учитывая, что вам нужно просто переключить логическое значение внутри объекта .

TLDR: я не уверен, должен ли lockboxes быть массивом или объектом, убрать проверку статуса внутри вашего обратного вызова ios, исправить мутацию assignAgency, использовать точки останова с debugger; и VueJS chrome плагин, чтобы помочь изучить ваш магазин во время разработки.

Answer 2

Вы можете использовать rootState для получения / установки целого состояния.

 updateAgency: ({ commit, rootState , state }, { workstation, lockboxes }) {
  rootState.lockboxes=[anything you can set ]
 }

Answer 3

В действии вы получаете 2 объекта

async myAction(store, payload)

Объект хранилища - это целое хранилище vuex, как и сейчас. Поэтому, когда вы получаете коммит, вы можете получить состояние, например,

async fetchLockboxes({ commit,state }) {//...}

Тогда вы сможете получить доступ ко всем состояниям в приложении.