Vuex: [vuex] unknown getter: accessing nested property fails with mapGetters but works with this.$store

[mbana]

Version

3.0.1

Reproduction link

https://github.com/banaio/vue_js_samples/tree/master/vuex_accessing_nested_property_bug

Steps to reproduce

git clone [email protected]:banaio/vue_js_samples.git
cd vue_js_samples
cd vuex_accessing_nested_property_bug
yarn install
yarn serve
open http://localhost:8080/

What is expected?

We should see the message { "level_3_field": "level_3_field_value" } twice, however it
appears only once. Please see the screenshot.

What is actually happening?

The message { "level_3_field": "level_3_field_value" } appears only once. As per this screenshot:

---

When state, see https://github.com/banaio/vue_js_samples/blob/master/vuex_accessing_nested_property_bug/src/store.js, is defined as:

  state: {
    level_1: {
      level_2: {
        level_3: {
          level_3_field: 'level_3_field_value',
        },
      },
    },
  },
  getters: {
    level_1: (state) => state.level_1,
  },

And used as, see https://github.com/banaio/vue_js_samples/blob/master/vuex_accessing_nested_property_bug/src/components/HelloWorld.vue,
the level_3_broken does not work, but the level_3_working seems to work:

  computed: {
    ...mapGetters({
      level_3_broken: 'level_1.level_2.level_3',
    }),
    level_3_working() {
      return this.$store.getters['level_1']['level_2'].level_3;
    },
  },

[LinusBorg]

That's because your using mapGetters incorrectly.

Within the object that you pass to mapGetters, you can't actually access the result of the getters - which you try to do here.

The object only defined what getters to map into your local computed properties.

Yo actually work with the getter's result, you have to access the created computed property from within our component at runtime, i.e. from a method or another computed prop.

If you need further assistance, please visit us at forum.vuejs.org

[mbana]

@LinusBorg thank you for the reply.

Can you give an example of what you mean, please. Or better yet, can you show me a working example of what I am trying to achieve.

At the moment it is unclear to me why level_3_working works yet level_3_broken doesn't. I've debugged the code and I can see the cause of this issue, however I don't know enough about the code to make an informed decision as to whether this is a bug or intentional.

[LinusBorg]

If you come to the forum, yes. Or our discord chat

Issues are not a place for that.