Config Store

Config Store is the store where you keep information about Account, Contact, Call and User. The store is reactive, so any mutations that is done to the store will take effect globally.

loadConfig()

Before using the configStore, you would need to initialize it to load the information.

// App.vue

import { onMounted } from '@vue/composition-api'
import { loadConfig } from '@pitcher/core'

export default {
 name: 'app',
 setup() {
   onMounted(async () => {
     await loadConfig()
   })
 }
}

useConfigStore()

After initialization, you can import useConfigStore function to access Config Store.

// App.vue

import { onMounted } from '@vue/composition-api'
import { loadConfig,  useConfigStore } from '@pitcher/core'

export default {
 name: 'app',
 setup() {
   onMounted(async () => {
     await loadConfig()
     const configStore = useConfigStore()

     console.log(configStore.state)
   })
 }
}

watchConfig(watchSource, callback, options)

A wrapper around vue's own watch to make sure changes made on the configStore reflected on the watch callback. Vue's own watcher cannot be used since configStore isn't fully reactive and fields added to the store cannot be watched since they are added asynchronously and they are undefined when the store first initialized.

// App.vue

import { onMounted } from '@vue/composition-api'
import { loadConfig,  useConfigStore, watchConfig } from '@pitcher/core'

export default {
 name: 'app',
 setup() {
   await loadConfig()
   const configStore = useConfigStore()

   watchConfig(
     () => configStore.someConfigField,
     (v) => console.log(v),
     {
       immediate?: boolean // default: false
       deep?: boolean // default: false
       flush?: 'pre' | 'post' | 'sync' // default: 'pre'
       onTrack?: (event: DebuggerEvent) => void
       onTrigger?: (event: DebuggerEvent) => void
     }
   )
 }
}

computedConfig(callback)

Same restrictions apply to the computed as the watcher - this wrapper around vue's own computed to make sure changes made on the fields of configStore reflected on the watch callback.

// App.vue

import { onMounted } from '@vue/composition-api'
import { loadConfig,  useConfigStore, computedConfig } from '@pitcher/core'

export default {
 name: 'app',
 setup() {
   await loadConfig()
   const configStore = useConfigStore()

   computedConfig(
     () => configStore.someConfigField,
   )
 }
}