Correctly using vuex in custom integration boilerplate
Hello again 🙂
i want to create a vuex store in the custom integration boilerplate. I already have an index.js file inside the stores folder and created a file named
userShipping.js
with following content:
I know its working, because i can see the store in the vue dev tools. But i can't access and use the actions and mutations...
i tried it with this:
But it does not fire the event.
Do you know how to use a custom store? - am i missing something?16 Replies
Hi @fabianclemenz 👋 , is this a new integration? Does it use Nuxt 3 as the boilerplate store?
Hi this is from the old template
ecommerce-integration-boilerplate
ah, okay
so it should be nuxt2 if i get it right 🙂
Nuxt 2
Store directory
The store directory contains your Vuex Store files. The Vuex Store comes with Nuxt out of the box but is disabled by default. Creating an index.js file in this directory enables the store.
store is enabled correctly - but i can't use the actions or mutations
i also tried calling directly the action with
context.root.$store.dispatch('addAddress', 'testuser', address)
I'm not certain of the setup there, how did you add this $store to the context?
Are you able to use pinia like here: https://github.com/vuestorefront/magento2/blob/release/1.1.0/packages/theme/pages/Page.vue?
GitHub
magento2/packages/theme/pages/Page.vue at release/1.1.0 · vuestoref...
Vue Storefront 2 integration for Magento 2. Contribute to vuestorefront/magento2 development by creating an account on GitHub.
thats from your integration.... i did not add something by myself
and i don't know how to disable vuex and use pinia instead
in the created .nuxt folder is following store.js which seems to automatically load everything
and is always newly generated after yarn dev or yarn build
In the docs you linked, the store is accessed like so:
this.$store.commit('todos/add', e.target.value)
have you tried this syntax? Instead of the context.root.$store
?
so like this: this.$store.commit('userShipping/addAddress', 'testing-store');
this
is not accessible in the way you implemented the components
`okay, what about . . .
context.root.$store.commit('userShipping/addAddress', 'testing-store')
?nope nothing is called..
ok now it worked.. don't know how...
i didn't change anything but now its working (with the
userShipping/addAddress
call)
thanks 🙂