javascript - 为什么javascript es6解构未定义？

Question

我在写vuex，喜欢解构语法，但是下面的语法有错误。解构变量未定义，正常变量输出良好。是什么原因？

[GET_BUSINESS_INFO]: async ({ commit, rootState }) => {
  const { user: { firstBranchId = '' } = {} } = rootState || {};

  console.log('GET_BUSINESS_INFO', rootState.user.firstBranchId);
  // undefined
  console.log('GET_BUSINESS_INFO', firstBranchId);
  // 1
},

标签： javascriptecmascript-6destructuring

Answer 1

除非rootStateorrootState.user是代理，或者rootState.userorrootState.user.firstBranchId属性是具有副作用的访问器属性（两者都不太可能），否则您展示的代码不可能按照您所说的那样做。唯一合理的解释是，在完成解构的位置和完成日志记录的位置之间存在一些改变rootState. 该更改将由您的 first 显示console.log，但不会由您的 second 显示，因为rootState在解构之后更改不会对firstBranchId. 在解构和日志​​记录之间有些东西。它可能是您正在调用的同步函数，也可能是await导致asyncrootState函数暂停并允许其他地方的其他代码在您等待承诺时运行修改。

async这是该场景的示例：

const example = async ({ commit, rootState }) => {
    const { user: { firstBranchId = '' } = {} } = rootState || {};
  
    await something();
  
    console.log('GET_BUSINESS_INFO', rootState.user.firstBranchId); // undefined
    console.log('GET_BUSINESS_INFO', firstBranchId);                // 1
};

function something() {
    return new Promise(resolve => setTimeout(resolve, 10));
}

const obj = {
    rootState: {
        user: {
            firstBranchId: 1,
        },
    },
};
const p = example(obj);
obj.rootState.user = {}; // This happens while awaiting `something()`
p.then(() => {
    console.log("Done");
});

您必须查看解构和日志​​记录之间的任何代码，以找出rootState修改的原因/位置/方式。