Dynamically accessing state properties using typescript

[ibtorsleff]

I am having trouble accessing my pinia store in a more dynamic way - I need a push in the right direction

My use case: A reusable ui component that can edit state properties in my pinia store.
The idea was to pass in a prop specifying the "fieldName", and then the component automatically gets hold of the store state specified by the "fieldName", and when the editing is completed the store get updated.

As you will see in the examples below I can access the state properties - but not in the dynamic/flexible way I need for this to work out

What are my options?

//Store.ts 
import { defineStore } from "pinia";

export const useMyStore = defineStore("My", () => {
    
  const storeValueAsNumber = ref(123);
  const storeValueAsString = ref("ABC");
  
  return {
    storeValueAsNumber,
    storeValueAsString,
  };
});

//Resuable Edit field UI component
//MyComp.vue

<script setup lang="ts">
  import { ref, } from "vue";
  import { useMyStore } from "@/stores/Store"; 
  import { storeToRefs } from "pinia";

  const props = defineProps({
    storeFieldName: {
      type: String, // preferrably typed as a list of valid Fields names to avoid mistakes
      default: "",
    },
  });

  const store = useMyStore();
  
  //OK
  const { storeValueAsNumber : fieldToEdit } = storeToRefs(store);
  
  //OK
  const fieldToEdit = store["storeValueAsNumber"];
  
  //OK
  const fieldName = "storeValueAsNumber";
  const fieldToEdit = store[fieldName];
  
  //ERROR
  const fieldToEdit = store[props.storeFieldName];
  //Error Msg:
  //Element implicitly has an 'any' type because expression of type 'string' can't be used to index type //'_StoreWithState<"My", _UnwrapAll<Pick<{ storeValueAsNumber: Ref<number>; ....
  //No index signature with a parameter of type 'string' was found on type '_StoreWithState<"My", _UnwrapAll<Pick<{ //storeValueAsNumber: Ref<number>...
    
  
  //ERROR - the same error 
  const fieldName: string = "storeValueAsNumber";
  const fieldToEdit = store[fieldName];
  //Error Msg:
  //Element implicitly has an 'any' type because expression of type 'string' can't be used to index type //'_StoreWithState<"My", _UnwrapAll<Pick<{ storeValueAsNumber: Ref<number>; ....
  //No index signature with a parameter of type 'string' was found on type '_StoreWithState<"My", _UnwrapAll<Pick<{ //storeValueAsNumber: Ref<number>...
  
</script>

[posva]

You can define the props with a type or use String as PropType<'one' | 'two'>:

import { PropType } from 'vue'
import { FieldNames } from './stores/yourstore'

const props = defineProps({
    storeFieldName: {
      type: String as PropType<FieldNames>,
      required: true
    },
  });

[ibtorsleff]

Hi Posva, Thanks for taking your time to give an answer

I already tried typing the prop with a type like this
export type FIELDNAMES =
| "storeValueAsNumber"
| "storeValueAsString";
However the main "problem" with accessing the store is not solved by doing that (alone at least) - so I made the example I posted a bit more simple.

So how can I access the store the same way as: const fieldToEdit = store["storeValueAsNumber"];
but using the prop name similar to this : const fieldToEdit = store[props.storeFieldName];

OR is this way of accessing the store a big no no ?

...ib

[posva]

you can do it but you need to properly type your props so you can do store[props.field]

[ibtorsleff]

Hi Posva, I am happy to see that your solution is the same as i started out with before making this original post - but unfortunately it does not work as advertised - which was why I made the post in the first place .

// mytypes.ts
export type FIELDNAMES =
  | "BoilAutomaticSetPointTemp"
  | "BoilManualSetPointLevel"
  | "HLTAutomaticSetPointTemp"
  | "instrumentTempProbeHLT"
  | "instrumentTempProbeMash"
  | "instrumentTempProbeBoil"
  | "HWHostOrIPAddress";
  
import type { FIELDNAMES } from "mytypes.ts";

const props = defineProps({
    storeFieldName: {
      type: String as PropType<FieldNames>,
      required: true
    },
  });

//ERROR
const fieldToEdit = store[props.storeFieldName];
  //Error Msg:
  //Element implicitly has an 'any' type because expression of type 'string' can't be used to index type //'_StoreWithState<"My", _UnwrapAll<Pick<{ storeValueAsNumber: Ref<number>; ....
  //No index signature with a parameter of type 'string' was found on type '_StoreWithState<"My", _UnwrapAll<Pick<{ //storeValueAsNumber: Ref<number>...
    

Or let rephrase this
vscode gives me the red squiggly line as you can see here

But it actually works! - so perhaps it is a TS problem or similar?

Any ideas on how to fix this?

[ibtorsleff]

Update: npm run build ("build": "run-p type-check build-only")
fails with the same error so I guess this overrules that it could be a false positive type check in vscode

[duc2019]

You can use $patch({ [fieldName]: value }) to write state dynamically, and use $state[fieldName] to access.
However, this only support properties already defined.
It's impossible to create new property dynamically in pinna.