이상한 Vuex 버그: "정의되지 않음", (콘솔에 정의됨이 표시되는 경우)?

이상한 Vuex 버그: "정의되지 않음", (콘솔에 정의됨이 표시되는 경우)?

vuex 상태 개체의 변수를 참조하려고 합니다.콘솔 로그에는 개체의 변수와 값이 전체적으로 표시됩니다.하지만 개체의 특정 변수를 참조하려고 하면 "정의되지 않음"으로 표시됩니다.??

콘솔 출력의 개체는 다음과 같습니다.

state.columnPercentVuex에서 해당 개체에서 확인한 비율을 참조하려고 합니다. 다음과 같은 작업을 수행합니다.

  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)
    }

콘솔 로그에 해당 로그에 대한 참조가 "정의되지 않음"으로 표시됩니다.제가 어디서 잘못되고 있나요?

다음은 전체 컨텍스트의 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
})

다음과 같은 방식으로 작업을 정의할 수 있습니다.

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}).

문서에서 작업이 전달되는 것을 확인할 수 있습니다.context을 포함하여state.

편집

당신은 몇 가지를 더 사용하는 것처럼 보였습니다.context그래서 해체 작업에 추가했습니다.

언급URL : https://stackoverflow.com/questions/44187704/weird-vuex-bug-undefined-when-it-shows-defined-in-the-console