在将参数“0”传递给函数时接收NaN

Question

我正在研究javascript，我有一个我没想到的结果，我不知道我哪里出错了，请按照下面的可测试示例：

const createStore = () => ({
  state: {
    life: 100
  },
  mutations: {
    reduceOneOfLife(state) {
      state.life -= 1;
    },
    reduceValueOfLife(state, valueForReduce) {
      state.life -= valueForReduce;
    }
  },
  getters: {
    currentLife(state) {
      return state.life;
    }
  },
  commit(keyMutation, payload) {
    !payload ? this.mutations[keyMutation](this.state) : this.mutations[keyMutation](this.state, payload);
  },
  get(KeyGetters) {
    return this.getters[KeyGetters](this.state);
  }
});

const store = createStore();

store.mutations.reduceValueOfLife(store.state, 0);
let currentLife = store.get('currentLife');
console.log(currentLife); // -> 100
console.log(currentLife === 100); // -> true

store.commit('reduceValueOfLife', 10);
currentLife = store.get('currentLife');
console.log(currentLife); // -> 90
console.log(currentLife === 100); // -> false

store.commit('reduceValueOfLife', 0);
currentLife = store.get('currentLife');
console.log(currentLife); // -> NaN
console.log(currentLife === 90); // -> false

我期望在测试store.commit('reduceValueOfLife', 0);...中获得90分和真实。

Answer 1

你有的问题是因为0（“假”）（以及null，undefined，''，NaN，当然还有false）

这意味着this.mutations[keyMutation](this.state)将在传递0作为第二个参数时被执行

commit(keyMutation, payload) {
    !payload ? this.mutations[keyMutation](this.state) : this.mutations[keyMutation](this.state, payload);
},

虽然你可以简单地测试是否payload === undefined，这意味着你永远不能传递undefined作为有效载荷

相反，您可以使用arguments.length检查函数调用的参数数量，如下所示：

commit(keyMutation, payload) {
    (arguments.length < 2) ? this.mutations[keyMutation](this.state) : this.mutations[keyMutation](this.state, payload);
},

Answer 2

你的commit功能有：

commit(keyMutation, payload) {
    !payload ? this.mutations[keyMutation](this.state) : this.mutations[keyMutation]    (this.state, payload);
},

也就是说，第一个表达式只在payload真实时运行。但是你的

store.commit('reduceValueOfLife', 0);

用虚假的payload值调用，所以运行如下：

this.mutations[keyMutation](this.state)

与keyMutation作为'reduceValueOfLife'。所以你的reduceValueOfLife功能

reduceValueOfLife(state, valueForReduce) {
        state.life -= valueForReduce;
        console.log('subtr ' + valueForReduce + ' --- ' + typeof valueForReduce);
}

得到valueForReduce作为undefined，并从undefined最初导致state.life减去NaN。

最好检查payload是否未定义，而不仅仅是假，然后你的store.get返回一个数值，而不是NaN：

commit(keyMutation, payload) {
  if (payload === undefined) this.mutations[keyMutation](this.state)
  else this.mutations[keyMutation](this.state, payload);
},

你的commit的另一个选择，而不是检查参数是否被定义，只是*用[keyMutation]和this.state调用payload函数。如果commit的payload是undefined，那么传递的第二个参数将是undefined，如果你根本没有传递第二个参数，你会看到相同的行为。

commit(keyMutation, payload) {
  this.mutations[keyMutation](this.state, payload);
},

如果你想最终的currentLife为100，在第二部分减少到90之后，你将不得不打电话

store.commit('reduceValueOfLife', -10);

在最后一部分将它增加到100：

const createStore = () => ({
  state: {
    life: 100
  },
  mutations: {
    reduceOneOfLife(state) {
      state.life -= 1;
    },
    reduceValueOfLife(state, valueForReduce) {
      state.life -= valueForReduce;
      console.log('subtr ' + valueForReduce + ' --- ' + typeof valueForReduce);
    }
  },
  getters: {
    currentLife(state) {
      return state.life;
    }
  },
  commit(keyMutation, payload) {
    if (payload === undefined) this.mutations[keyMutation](this.state)
    else this.mutations[keyMutation](this.state, payload);
  },
  get(KeyGetters) {
    return this.getters[KeyGetters](this.state);
  }
});

const store = createStore();

store.mutations.reduceValueOfLife(store.state, 0);
let currentLife = store.get('currentLife');
console.log(currentLife); // -> 100
console.log(currentLife === 100); // -> true

store.commit('reduceValueOfLife', 10);
currentLife = store.get('currentLife');
console.log(currentLife); // -> 90
console.log(currentLife === 100); // -> false

store.commit('reduceValueOfLife', -10);
currentLife = store.get('currentLife');
console.log(currentLife);
console.log(currentLife === 100);