奇怪的 Vuex 错误："Undefined"，（当它在控制台中显示已定义时）？

Question

我正在尝试引用 vuex 状态对象中的变量。控制台日志显示整个对象中的变量和值。但是当我尝试引用对象中的特定变量时，它显示为 "undefined"???

这是控制台输出的对象：

我正在尝试从 Vuex 操作中的对象引用 state.columnPercentChecked，如下所示：

  checkAndSetColumnPercent (state) {
    console.log('CHECK & SET COLUMN PERCENT ')
    console.log(state.columnPercentChecked)
    console.log(state)
    if (state.columnPercentChecked === true) {
      console.log('checkAndSetColumnPercent TRUE HIT ')
      var colPercent = state.getters('getColumnPercent')
      console.log('checkAndSetColumnPercent : colpercent ' + colPercent)
      state.commit('CHANGE_INITIAL_PERCENT', colPercent)
    }

控制台日志显示对它的引用为 "undefined"???我哪里错了？

这里是 store.js 文件的完整上下文：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// root state object.
// each Vuex instance is just a single state tree.
const state = {
    initialPercent: 100,
    columnPercentChecked: false,
    pricePoints: [],
    optimizePrices: false,
    optimizeAbove: null,
    startAsset: null,
    endAsset: null,
    assetPair: null,
    exchange: null
}
// mutations are operations that actually mutates the state.
// each mutation handler gets the entire state tree as the
// first argument, followed by additional payload arguments.
// mutations must be synchronous and can be recorded by plugins
// for debugging purposes.
const mutations = {
  ADD_PRICE_POINT ({pricePoints}, pricePoint) {
    state.pricePoints.push(pricePoint)
  },
  DELETE_PRICE_POINT ({pricePoints}) {
    pricePoints.splice(state.pricePoints, 1)
  },
  CHANGE_INITIAL_PERCENT ({initialPercent}, newPercent) {
    state.initialPercent = newPercent
  },
  TOGGLE_COLUMN_CHECKED ({columnPercentChecked}) {
    state.columnPercentChecked = !columnPercentChecked
  }
}
// actions are functions that causes side effects and can involve
// asynchronous operations.
const actions = {
  addPricePoint (state, pricePoint) {
    state.commit('ADD_PRICE_POINT', pricePoint)
    state.dispatch('checkAndSetColumnPercent')
  },
  changeInitialPercent (state, newPercent) {
    state.commit('CHANGE_INITIAL_PERCENT', newPercent)
    if (state.columnPercentChecked === true ) {
      state.commit('TOGGLE_COLUMN_CHECKED')
    }
  },
  toggleColumnPercentChecked (state) {
    state.commit('TOGGLE_COLUMN_CHECKED')
    state.dispatch('checkAndSetColumnPercent')
  },
  checkAndSetColumnPercent (state) {
    console.log('CHECK & SET COLUMN PERCENT ')
    console.log(state.columnPercentChecked)
    console.log(state)
    if (state.columnPercentChecked === true) {
      console.log('checkAndSetColumnPercent TRUE HIT ')
      var colPercent = state.getters('getColumnPercent')
      console.log('checkAndSetColumnPercent : colpercent ' + colPercent)
      state.commit('CHANGE_INITIAL_PERCENT', colPercent)
    }
  }
}
// getters are functions
const getters = {
  getColumnPercent ({ pricePoints }) {
    var l = pricePoints.length
    if (l > 1){
      return 100 / l
    }
    return 100
  }
}
// A Vuex instance is created by combining the state, mutations, actions,
// and getters.
export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

Answer 1

我相信您想以这种方式定义您的操作：

checkAndSetColumnPercent ({state, commit, getters}) {
    console.log('CHECK & SET COLUMN PERCENT ')
    console.log(state.columnPercentChecked)
    console.log(state)
    if (state.columnPercentChecked === true) {
      console.log('checkAndSetColumnPercent TRUE HIT ')
      var colPercent = getters.getColumnPercent
      console.log('checkAndSetColumnPercent : colpercent ' + colPercent)
      commit('CHANGE_INITIAL_PERCENT', colPercent)
    }
}

注意解构的({state})。

您可以在 documentation 中看到操作传递了 context，其中包括 state。

编辑

看起来你使用了更多来自 context 的东西，所以我将它们添加到解构中。

奇怪的 Vuex 错误："Undefined"，（当它在控制台中显示已定义时）？

Weird Vuex Bug: "Undefined", (When It Shows Defined In The Console)?

vuejs2

vuex