Question

我一直在想这个，但我不知道。我有两个用于报告两组数据（密码箱和工作站）的API。密码箱API包含具有我需要处理的recordId的代理机构的集合。工作站API是主要集合，它通过将主体中的lockboxes.recordId和station.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)
  }
};

过程：

当我从下拉列表中选择一个密码箱，并在工作站中也要分配密码箱的拨动开关时，我确实显示了密码箱，但由于更新仅发生在前端，因此密码箱会自动消失。我并没有像我希望的那样在我的身体中真正传递Workstation.recordId或lockboxes.recordId。它不是在读取状态，也不在为状态（工作站或密码箱）识别recordId。

console.log返回（未捕获（承诺）未定义）

该请求正在处理404，并且正文（{}）中有一个有效载荷

甚至没有触发突变

模板

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

在某些时候，我尝试读取getter中的两个状态之前正在读取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方法中，这可能是问题所在：

  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);
      });
  });

仅当状态码为2xx或3xx时才调用axios的.then第一个参数。因此，测试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是数组还是对象，请删除axios回调中的状态检查，修复assignAgency突变，在debugger;中使用断点和VueJS chrome插件可帮助您在开发过程中检查商店。

Answer 2

在一个动作中，您传递了2个对象

async myAction(store, payload)

store对象现在是整个vuex商店。因此，在要提交的位置，您可以像这样获得状态

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

然后您可以访问应用程序中的所有状态。

Answer 3

您可以使用 rootState 获取/设置整个状态。

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

一次执行两个状态的管理-vuex

3 个答案: