materio-d8/web/themes/custom/materiotheme/vuejs/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import { createStore } from 'vuex-extensions'

// import { JSONAPI } from 'vuejs/api/json-axios'
// import qs from 'querystring-es3'

import { MGQ } from 'vuejs/api/graphql-axios'
import { print } from 'graphql/language/printer'
import gql from 'graphql-tag'
// import materiauFields from 'vuejs/api/gql/materiau.fragment.gql'

import Common from './modules/common'
import User from './modules/user'
import Search from './modules/search'
import Blabla from './modules/blabla'
import Showrooms from './modules/showrooms'
import Pages from './modules/pages'


// https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart

Vue.use(Vuex)
// export default new Vuex.Store({
export default createStore(Vuex.Store, {
  modules: {
    Common,
    User,
    Search,
    Blabla,
    Showrooms,
    Pages
  },
  // https://github.com/huybuidac/vuex-extensions
  mixins: {
    actions: {
      loadMaterialsGQL ({ dispatch }, { ids, gqlfragment, callBack, callBackArgs }) {
        console.log('loadMaterialsGQL ids', ids)

        let ast = gql`{
          materiaux(ids: [${ids}]) {
            ...MateriauFields
          }
        }
        ${ gqlfragment }
        `
        MGQ.post('', { query: print(ast) })
          .then(( resp ) => {
            console.log('loadMaterialsGQL resp', resp )
            // dispatch('parseMaterialsGQL', {
            //   items: resp.data.data.materiaux,
            //   callBack: callBack,
            //   callBackArgs: callBackArgs
            // })
            dispatch(callBack, {
              items: resp.data.data.materiaux,
              callBackArgs: callBackArgs
            })
          })
          .catch(error => {
            console.warn('Issue with loadMaterials', error)
            Promise.reject(error)
          })
      }
      // parseMaterialsGQL ({ dispatch }, { items, callBack, callBackArgs }) {
      //   dispatch(callBack, { items: items, callBackArgs: callBackArgs })
      // }
      // loadMaterials ({ dispatch }, { uuids, imgStyle, callBack, callBackArgs }) {
      //   const params = {
      //     // include: 'images', // no needs to include thanks to consumers_image_styles module
      //     // include: 'drupal_internal__nid',
      //     'filter[uuids-groupe][group][conjunction]': 'OR'
      //   }
      //   for (let i = 0; i < uuids.length; i++) {
      //     const uuid = uuids[i]
      //     params[`filter[${uuid}][condition][path]`] = 'id'
      //     params[`filter[${uuid}][condition][value]`] = uuid
      //     params[`filter[${uuid}][condition][operator]`] = '='
      //     params[`filter[${uuid}][condition][memberOf]`] = 'uuids-groupe'
      //   }
      //   // console.log('search JSONAPI params', params);
      //   const q = qs.stringify(params)
      //   return JSONAPI.get('node/materiau?' + q)
      //     .then(({ data }) => {
      //       console.log('mixin getMaterials data', data)
      //       dispatch('parseMaterials', { data: data.data, uuids: uuids, imgStyle: imgStyle, callBack: callBack, callBackArgs: callBackArgs })
      //       // commit('setItems', data.items)
      //     })
      //     .catch((error) => {
      //       console.warn('Issue with getItems', error)
      //       Promise.reject(error)
      //     })
      // },
      // parseMaterials ({ dispatch }, { data, uuids, imgStyle, callBack, callBackArgs }) {
      //   // data comes from jsonapi query
      //   // uuids comes from original query (solr, FlagCollection, etc)
      //   // so we loop from uuids to conserve the original order
      //   console.log('mixin parseMaterials', data, uuids, callBack, callBackArgs)
      //   const items = []
      //   // for (var i = 0; i < data.length; i++) {
      //   for (let i = 0; i < uuids.length; i++) {
      //     const uuid = uuids[i]
      //     // https://stackoverflow.com/questions/11258077/how-to-find-index-of-an-object-by-key-and-value-in-an-javascript-array
      //     const item_index = data.findIndex(p => p.id === uuid)
      //     // console.log('item_index', item_index);
      //     if (item_index === -1) continue
      //
      //     const item_src = data[item_index]
      //     const attrs = item_src.attributes
      //     const relations = item_src.relationships
      //
      //     // get field values
      //     const item = {
      //       uuid: uuid,
      //       title: attrs.title,
      //       field_short_description: attrs.field_short_description,
      //       body: attrs.body,
      //       field_reference: attrs.field_reference
      //     }
      //
      //     // get images included values
      //     const img_src = relations.images.data
      //     // console.log('img_src', img_src);
      //     // this is a temporary deactivation of images
      //     // img_src = [];
      //     item.images = []
      //     for (let j = 0; j < img_src.length; j++) {
      //       if (img_src[j].meta.imageDerivatives) {
      //         let img_styles = {}
      //         for (var k = 0; k < imgStyle.length; k++) {
      //           img_styles[imgStyle[k]] = img_src[j].meta.imageDerivatives.links.[imgStyle[k]].href
      //         }
      //         item.images.push({
      //           title: img_src[j].meta.title,
      //           src: img_src[j].meta.imageDerivatives.links.hd.href,
      //           // meta.imageDerivatives.style.href link is provided by drupal consumers_image_styles module
      //           // BUG: missing all image derivative but first
      //           img_styles: img_styles
      //         })
      //       } else {
      //         console.warn('missing image derivative ' + j + '/' + img_src.length + ' for ' + attrs.title)
      //       }
      //     }
      //
      //     items.push(item)
      //   }
      //   console.log('items', items)
      //   dispatch(callBack, { items: items, callBackArgs: callBackArgs })
      // }
    }
  }
})