How to return a copy of the value from an object in vuex store?

Question

JavaScript

Here I monitor the metrics that are changing and if the condition works, I pass the metric objects to store mutations

watch: {
        metric() {
            if (this.metric) {
                this.setSingleMetricNamesMap({
                    id: this.metric.id,
                    name: this.metric.name })
            }
        }
    },

state state getter I try to return the name of the metric by id which I pass from the component
singleMetricNamesMap: {}

singleMetricNamesMap: state => id => state.singleMetricNamesMap[id]

state mutations Write metric objects to state

setSingleMetricNamesMap: (state, val) => {
            state.singleMetricNamesMap[val.id] = val.name
        },

The component where I pass a metric to the state getter id and try to return a copy of its name value from the store.singleMetricNamesMap object. But after reloading the page, I get undefined on the property of the object, that is, on id, and the names for the metrics appear only after the metric changes (for example, editing). Please tell me if I am returning a copy of the value from the store.singleMetricNamesMap object and how to display the names of the metrics immediately when the component is loaded

<z-dash-tile-config-option
            label="Metric"
            :value="singleMetricNamesMap(value.metricId)"
        >

Answer 1

after reloading the page I get undefined

Store the state in localStorage.
If you are too lazy to implement saving yourself, there are ready-made plugins, for example .
A getter in storage that returns a function that returns an object by the passed id... I don't see the point of such complications.
Just read a property of an object, of type $store.state.singleMetricNamesMap[value.metricId]. If this is too long in your opinion, make a calculated property in the component that will represent singleMetricNamesMap.