New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mbana opened this Issue Dec 31, 2018 · 3 comments

Comments

Projects
None yet
2 participants
@mbana
Copy link

mbana commented Dec 31, 2018

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 git@github.com: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:

Image of broken


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

This comment has been minimized.

Copy link
Member

LinusBorg commented Dec 31, 2018

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

@LinusBorg LinusBorg closed this Dec 31, 2018

@mbana

This comment has been minimized.

Copy link

mbana commented Dec 31, 2018

@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

This comment has been minimized.

Copy link
Member

LinusBorg commented Dec 31, 2018

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

Issues are not a place for that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment