JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.global.js"></script>
<div id="app">
  <button @click="qualifiersChosenHandler({
    qualifiedProducts: null,
    chosenQualifiers: { ymmTitle: 'abc', qualifiers: 'def' }
  })">Click</button>
</div>

JavaScript

const { createApp, computed } = Vue
const { createStore, useStore } = Vuex

const store = createStore({
  state: {
    ymmData: {}
  },
  
  mutations: {
    setYMMQualifiedData (state, { collectionQueryObj }) {
      state.ymmData.collectionQueryObj = collectionQueryObj
    }
  },
  
  getters: {
    collectionQueryObj: ({ ymmData }) => {
      return ymmData.collectionQueryObj
    }
  }
})

function useGetters (arr) {
  const store = useStore()
  const keypair = arr.map(g => [g, computed(() => store.getters[g])])
  return Object.fromEntries(keypair)
}

function useMutations (arr) {
  const store = useStore()
  const keypair = arr.map(m => [m, params => store.commit(m, params)])
  return Object.fromEntries(keypair)
}

const app = createApp({
  setup () {
    const { setYMMQualifiedData } = useMutations(['setYMMQualifiedData'])
    const { collectionQueryObj } = useGetters(['collectionQueryObj'])

    // I don't know what this is, so I've just made it an object as that
    // seems to be consistent with how it is being used in the other code
    const ymmDataRef = {}

    const qualifiersChosenHandler = async ({ qualifiedProducts, chosenQualifiers }) => {
      ymmDataRef.collectionQueryObj =  chosenQualifiers
      setYMMQualifiedData(ymmDataRef) //add ymmDataRef object to store
      // const { ymmTitle, qualifiers } = ymmDataRef.collectionQueryObj
      const { ymmTitle, qualifiers } = collectionQueryObj.value //THIS DOES NOT WORK!!!!! trying to get vars from item i just put in store
      console.log(ymmTitle, qualifiers)
    }
    
    return {
      qualifiersChosenHandler
    }
  } 
})

app.use(store)

app.mount('#app')