javascript - 将参数 "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

我预计在测试中会得到 90 和 true store.commit('reduceValueOfLife', 0);...。

Answer 1

您的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);