Nuxt.js: Access VUEX store inside of LAYOUT files

[kevinrodriguez-io]

Hi guys, i've been having problems reading the $store object on the layout files, i want to know if this is because of design of VUE or it's just a feature that will be implemented.

I have the following vuetify app on my layout:

<v-app :dark="store.state.dark">...</v-app>

But i'm getting the following error: "Cannot read property 'state' of undefined"

If I try to modify the $store object. It is going to throw the same kind of error "Cannot read the property commit of undefined".

Is this a current limitation? An error? A technical decision?

(For Writing on the STORE: I had to create a component and reference the store from the component)

_{This question is available on Nuxt.js community (#c1510)}

[KonstantinVlasov]

Hi! I have no problem with store in layouts. Make sure to create default vuex store in /store folder, otherwise nuxt build don't include vuex at all.

[kevinrodriguez-io]

This was because of a really weird thing:

If i code like this:

export default { computed: { isDarkMode: { get: () => { return this.$store.darkMode } } } }

It throws an error telling me that it can't read darkMode

But if i code the following way:

export default { computed: { isDarkMode: { get: function () { return this.$store.darkMode } } } }

Or the following way:

export default { computed: { isDarkMode: { get () { return this.$store.darkMode } } } }

It just works, the weird thing is that arrow functions are not working for me on layout files

[joshuabryant]

@darkndream The arrow function expression (() => {}) doesn't treat scope the same as function expressions (function () {}). That's why you were getting unexpected results in terms of what is available on your $store object.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.