Alokai•15mo 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•15mo ago

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

FabianClemenz•15mo ago

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

rohrig•15mo ago

ah, okay

FabianClemenz•15mo ago

so it should be nuxt2 if i get it right 🙂

FabianClemenz•15mo 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.

FabianClemenz•15mo 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•15mo ago

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

rohrig•15mo 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.

FabianClemenz•15mo 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

FabianClemenz•15mo ago

store.js

FabianClemenz•15mo ago

and is always newly generated after yarn dev or yarn build

rohrig•15mo 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');

FabianClemenz•15mo 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•15mo ago

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

FabianClemenz•15mo 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 🙂

Gaming

Programming

Correctly using vuex in custom integration boilerplate