Alokai•2y ago

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:

export const state = () => ({
  addresses: []
});

export const getters = {
  getAddress: (state) => (user) => {
    return state.addresses.find(e => e.user === user);
  }
};

export const mutations = {
  addAddress: (state) => (user, address) => {
    // check if user is already in list -> update
    const idx = state.addresses.findIndex(e => e.user === user);
    if (idx === -1) {
      state.addresses.push({user: user, shippingAddress: address});
    } else {
      state.addresses[idx].shippingAddress = address;
    }
  },
  removeAddress: (state) => (user) => {
    const idx = state.addresses.findIndex(e => e.user === user);
    if (idx !== -1) {
      state.list.splice(idx, 1);
    }
  }
};

export const actions = {
  addAddress({commit}, user, address) {
    commit('add', user, address);
  }
};

export const state = () => ({
  addresses: []
});

export const getters = {
  getAddress: (state) => (user) => {
    return state.addresses.find(e => e.user === user);
  }
};

export const mutations = {
  addAddress: (state) => (user, address) => {
    // check if user is already in list -> update
    const idx = state.addresses.findIndex(e => e.user === user);
    if (idx === -1) {
      state.addresses.push({user: user, shippingAddress: address});
    } else {
      state.addresses[idx].shippingAddress = address;
    }
  },
  removeAddress: (state) => (user) => {
    const idx = state.addresses.findIndex(e => e.user === user);
    if (idx !== -1) {
      state.list.splice(idx, 1);
    }
  }
};

export const actions = {
  addAddress({commit}, user, address) {
    commit('add', user, address);
  }
};

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:

context.root.$store.commit('addAddress', 'testuser', address);

context.root.$store.commit('addAddress', 'testuser', address);

But it does not fire the event. Do you know how to use a custom store? - am i missing something?

16 Replies

rohrig•2y ago

Hi @fabianclemenz 👋 , is this a new integration? Does it use Nuxt 3 as the boilerplate store?

FabianClemenzOP•2y ago

Hi this is from the old template ecommerce-integration-boilerplate

rohrig•2y ago

ah, okay

FabianClemenzOP•2y ago

so it should be nuxt2 if i get it right 🙂

FabianClemenzOP•2y ago

i used this: https://v2.nuxt.com/docs/directory-structure/store/ for reference

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.

FabianClemenzOP•2y ago

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)

rohrig•2y ago

I'm not certain of the setup there, how did you add this $store to the context?

rohrig•2y ago

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.

FabianClemenzOP•2y ago

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

FabianClemenzOP•2y ago

store.js

FabianClemenzOP•2y ago

and is always newly generated after yarn dev or yarn build

rohrig•2y ago

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');

FabianClemenzOP•2y ago

this is not accessible in the way you implemented the components

<script>
import {
  SfHeading,
  SfButton,
  SfIcon
} from '@storefront-ui/vue';
import { computed, useRouter, useFetch } from '@nuxtjs/composition-api';
import { useUserShipping, userShippingGetters } from '@vue-storefront/bastuck';
import UserShippingAddress from '~/components/UserShippingAddress';

export default {
  name: 'Shipping',
  components: {
    SfHeading,
    SfButton,
    SfIcon,
    UserShippingAddress
  },
  setup(props, context) {
    const router = useRouter();
    const { shipping, load: loadUserShipping, loading } = useUserShipping();
    const addresses = computed(() => shipping.value ? userShippingGetters.getAddresses(shipping.value) : []);

    const activeAddress = computed(context.root.$store.state.userShipping._address);
    const handleFormSubmit = async () => {
      console.log('whoops not implemented');
    };

<script>
import {
  SfHeading,
  SfButton,
  SfIcon
} from '@storefront-ui/vue';
import { computed, useRouter, useFetch } from '@nuxtjs/composition-api';
import { useUserShipping, userShippingGetters } from '@vue-storefront/bastuck';
import UserShippingAddress from '~/components/UserShippingAddress';

export default {
  name: 'Shipping',
  components: {
    SfHeading,
    SfButton,
    SfIcon,
    UserShippingAddress
  },
  setup(props, context) {
    const router = useRouter();
    const { shipping, load: loadUserShipping, loading } = useUserShipping();
    const addresses = computed(() => shipping.value ? userShippingGetters.getAddresses(shipping.value) : []);

    const activeAddress = computed(context.root.$store.state.userShipping._address);
    const handleFormSubmit = async () => {
      console.log('whoops not implemented');
    };

rohrig•2y ago

okay, what about . . . context.root.$store.commit('userShipping/addAddress', 'testing-store') ?

FabianClemenzOP•2y ago

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 🙂

rohrig•2y ago

great 🙂

Gaming

Programming

Correctly using vuex in custom integration boilerplate