奇怪的Vuex错误：“未定义”，（当它显示在控制台中定义）？

Question

我想在vuex状态对象中引用一个变量。控制台日志显示整个对象中的变量&值。但是当我尝试引用对象中的特定变量时，它显示为“未定义”？

下面是从控制台输出对象：

我试图从该对象引用state.columnPercentChecked在Vuex行动，像这样：

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

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，所以我说他们的解构。