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

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

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是 undefined，而不仅仅是 falsey，然后你的 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);