从 rootState vuex 获取对象而不是数字答案

【问题标题】：Getting an object instead a number from rootState vuex从 rootState vuex 获取对象而不是数字
【发布时间】：2021-05-08 15:09:24
【问题描述】：

我正在尝试从表状态中获取 activeTables。

const state = {
    activeTable: 0,
    tables: [{id:1},{id:2}],
}

当我从另一个模块执行 rootState.tables.activeTable 时，我得到了 Object 但我想要这个值。

我试图在 console.log 中更深入地了解树结构，但我无法获得值

const actions = {
    async addCommand ({commit, rootState},articles) {
        console.log(rootState.tables.activeTable) // getting an object instead a number
        commit('ADD_COMMAND', {table_id:rootState.tables.activeTable,list:articles})
        await api.insert(articles)
    },
}

// 存储/index.js

import Vuex from 'vuex'
import Vue from 'vue'
import products from './modules/products.js'
import tables from './modules/tables.js'
import command from './modules/command.js'

Vue.use(Vuex)

export default new Vuex.Store({
    modules : {
        products,
        tables,
        command
    },
})

存储/模块/tables.js


const state = {
    activeTable: 0,
    tables: [{id:1},{id:2}],
}

const getters = {
    tables: state => state.tables,
    activeTable: state => state.activeTable,
    
}

const actions = {
    setActiveTableId (id) {
        this.commit('SET_ACTIVE_TABLE', id)
    }
}

const mutations = {
    SET_TABLES:(state, tables) => {
        state.tables = tables;
    },
    SET_ACTIVE_TABLE:(state, id) => {
        state.activeTable = id
    }
}

export default {
    state: state,
    mutations: mutations,
    getters: getters,
    actions: actions,
    strict: true,
}

存储/模块/command.js

const state = {
    listCommand: []
}

const getters = {
    listCommand: state => state.listCommand
}

const actions = {
    async addCommand ({commit, rootState},articles) {
        console.log(rootState.tables)
        api.setUrl(api.url+'&table=command')
        commit('ADD_COMMAND', {table_id:rootState.tables.activeTable,list:articles})
        await api.insert(articles)
    },
    async addOrderLine({commit}, product){
        api.setUrl(api.url+'&table=orderline')
        await api.insert(product)
    }
}

const mutations = {
    ADD_COMMAND: (state, articles) => {
        state.listCommand.push(articles)
    },
    SET_LISTCOMMAND:(state, articles) => {
        state.listCommand = {table_id:state.activeTable,list:articles};
    },
}

export default {
    state: () => state,
    mutations: mutations,
    getters: getters,
    actions: actions,
    strict: true,
}

【问题讨论】：

我不是 100% 确定您要做什么，但在我看来，您似乎没有正确选择您的活动表。如果您尝试通过索引选择表，请执行 rootState.tables[rootState.activeTable]。如果您尝试通过 id 选择它： const selectedTable = rootState.tables.find(table => table.id === rootState.activeTable)
是的，我收到了undefined。我该怎么做才能获得“activeTable”的值。否则我看不到如何获得 root 权限
它不起作用。我得到undefined
undefined for console.log(rootState.activeTable) 和 console.log(rootState.tables) 我得到了带有表格状态的观察者，但我无法获得 activeTables 的值
听起来您的商店设置不正确，因为您将状态和动作都写为 const 而不是商店中的属性。我认为您最好通读 vuex 文档并逐步进行操作。 vuex.vuejs.org/guide/#the-simplest-store

标签： vue.js vuex vuex-modules

【解决方案1】：

我的错误在“store/modules/tables.js”中

我忘了添加 {commit} 参数..

before

const actions = {
    setActiveTableId (id) {
        this.commit('SET_ACTIVE_TABLE', id)
    }
}
after
const actions = {
    setActiveTableId ({commit},id) {
        this.commit('SET_ACTIVE_TABLE', id)
    }
}

谢谢大家

【讨论】：