Allow to use useLDFlag in pinia store

[mslawins]

Hi!

I'm testing LaunchDarkly in Vue 3.2 through LaunchDarkly Client SDK v1.2.1. I don't want to pollute my application code with SDK calls directly in components. My idea is to move all LD handling into separate Pinia store slice. Rough idea shown below:

import type { Ref } from 'vue';
import { defineStore } from 'pinia';
import { useLDFlag } from 'launchdarkly-vue-client-sdk';

export const useFeatureFlagsStore = defineStore(
  'LaunchDarklyFeatureFlags',
  () => {
    const flagOne: Readonly<Ref<boolean>> = useLDFlag('flagOne', false);
    const flagTwo: () => Readonly<Ref<boolean>> = () =>
      useLDFlag('flagTwo', false);
    const flagThree = computed(() => useLDFlag('flagThree', false));

    return {
      flagOne,
      flagTwo,
      flagThree,
    };
  }
);

This does not work. useLDFlag description states:

Evaluates a single feature flag. Automatically subscribes to streamed updates
unless the `streaming` option was set to false.
Uses Vue's inject API, so will only work if run inside a Vue setup hook or `<script setup>`.

I was not able to find solution in the docs. Is there any known way to work around that? Unfortunately this is make or break situation for me when it comes to using LaunchDarkly altogether.

From my understanding this is somewhere between feature request and bug report. SDK should allow to do this kind of stuff otherwise it is incomplete at best.

Any help is appreciated. Thanks!

[yusinto]

There's no immediate plans to support Pinia however, according to the Pinia docs, you should be able to inject globally provided properties:

import { inject } from 'vue'
import { LD_FLAG } from 'launchdarkly-vue-client-sdk'

export const useLDStore = defineStore('LD', () => {
  // `app.provide('LD_FLAG', ...)` should have been called at plugin install
  const getFlag = inject(LD_FLAG)
  const flag1 = getFlag('flag1', false);

  return {
    // ...
  }
})

[nihad-prosaldo]

what is the value of the app.provide function call? as the function requires a 2nd parameter

[whiplashwebb]

I can confirm this does in fact work but only with Pinia 2.1.0+ as injection in setup stores is a recent feature. This led to a frustrating afternoon, my code sustained a lot of verbal abuse, but it snapped into place once I updated pinia. My implementation looks something like this:

import { useLDFlag } from 'launchdarkly-vue-client-sdk';
import { defineStore } from 'pinia';

export const useLaunchDarklyStore = defineStore('launchDarkly', () => {
	return {
		enableMyFeature: useLDFlag('enable-my-feature', false),
	};
});

I'm pretty sure the code above would work as well, but there's no real need to use inject() directly as useLDFlag() and other composables handle the injection for you. @yusinto please consider adding an example of usage in Pinia to your example app and/or docs, it's really critical to provide some way to interact with Pinia and Vue Router. I would agree with @mslawins that this plugin is incomplete without that functionality.

[nihad-prosaldo]

Oh okay, did not know that. I spent quite some time implementing a workaround while an update of pinia would have been the solution 😅
Thanks for the information, will update my code 😄 !

[yusinto]

Thanks for the feedback and apologies for the slow update. We will look into updating our docs to include an example usage with Pinia. Logged internally as 235842.