Vue3,TS, comp API, Vuex : Problem accessing Vuex store using using name of state property

I have made a small re-useable vue component that allows for editing a single field
I want to use this component in several places in a parent component in relationship with vuex store.
I need a dynamic way of accessing the relevant vuex store state property inside of this child edit component.
The idea is that the component can read the “relevant” store state property value on initialization, and update the relevant state store with the new value when the edit is completed.
I was hoping to avoid emitting “EditCompleted” events from the edit components to the parent, and simply pass in a “Property” on the child edit component that specify which Store State property to “retrieve” the value from - and then commit to the correct mutation on edit complete

I can get the first part to work when accessing the store using:
const myStateKeyName = ‘name’
but not if I use a property or variable directly
I am sure it is just lack of knowledge from my side, so I am hoping someone will be able to help out
ALSO - if there is a better way to do this please enlighten me slight_smile:

// define your typings for the store state
export interface State {
  name: string,
  level: number
}

export const store = createStore<State>({
  state: {
    name: 'myname',
    level: 33
  }
})

export default defineComponent({
    name: "InlineEdit",
    props: {
       storeStateName: {
            type: String, 
            required: false  
        },
    },
    setup(props) {

console.log('using storeStateName: ' + props.storeStateName)

 //read works for accessing using string value retrieving a string 'value' 
 const myStateKeyName = 'name'
 console.log('store: myStateKeyName: ' + store.state[myStateKeyName])

 //read works for accessing using string value retrieving a number value 1234
 const myStateKeyLevel = 'level'
 console.log('store: myStateKeyLevel: ' + store.state[myStateKeyLevel])
 
//ERROR -> accessing using string variable 
 console.log('Prop: storeStateName: ' + props.storeStateName)
 console.log('Store: using prop' + store.state[props.storeStateName]) //Error
 //Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'State'.
 //No index signature with a parameter of type 'string' was found on type 'State'.
 
 const Trythis = props.storeStateName
 console.log('Store: using prop' + store.state[Trythis]) //Error
 //Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'State'.
 //No index signature with a parameter of type 'string' was found on type 'State'.

The code provided is currently not properly formatted for this forum. In its current state it’s illegible which makes it hard for people to help you.

Please read the following guide about how to properly format code and then edit your topic accordingly.

Thanks!

Nothing wrong with your approach. As for the error, these are type errors, not Vue. TS is looking at State for an index signature to understand how you’re trying to access the object’s properties.

Basically it’s expecting you to define the property index [key: string]

export interface State<Type> {
  [key: string]: Type
}

You may have already come across this SO, but this is essentially why:

This is my understanding of it in this use case at least, I haven’t used TS in Vue yet, just React.

Thanks for the quick reply - I will give that a try