How can I modify a various pieces of my Vuex from within a reusable nested component?

Question

I am trying to create a reusable component that contains a text field and a check box. This component will be used several times to modify some state. So I cannot directly reference which piece of state within the component.

<template>
  <v-layout>
    <v-text-field placeholder="Name ..." v-model="name"></v-text-field>
    <v-checkbox label="Frozen" v-model="frozen"></v-checkbox>
  </v-layout>
</template>

<script>
export default {
  name: "InstanceHeader",
  props: [ 'name', 'frozen' ],
}
</script>

And then I'm using it as follows.

<instance-header
  :name="$store.state.myobj.name"
  :frozen="$store.state.myobj.isfrozen" />

So this obviously doesn't pass the data back out. I tried following this which I changed the invocation to pass only 'name' as the v-model and changed the text-field to have the exact same @input and v-model from the prop. This actually didn't modify my Vuex store at all.

Obvious this works if I change the v-model inside the reusable component to by $store.state.myobj.name but then it's not reusable for other aspects of the Vuex.

<template>
  <v-layout>
    <v-text-field placeholder="Name ..." :value="value" @input="$emit('input', $event.target.value)">
    <v-checkbox label="Frozen" v-model="frozen"></v-checkbox>
  </v-layout>
</template>

<script>
export default {
  name: "InstanceHeader",
  props: [ 'value' ],
  data () => { return { frozen: false } } // ignored for now
}
</script>

Then invoke

<instance-header v-model="$store.state.myobj.name" />

This is not modifying the state at all either.

I'm reading about events which according to Vuejs documentation are the proper want to pass this information back up to the parent, and I'm sure this question is answered somewhere but I can't find it.

I'd like the single source of truth for my state to be in Vuex in $store.state but I want to be able to edit this state with components that don't necessarily know which part of the state they're modifying for reusability. Basically just like the v-model attribute on any input field.

Anatoly Anatoly · Accepted Answer · 2019-12-16T21:02:03

You have to wrap your store props like this:

computed: {
  fullName: {
    // getter
    get: function () {
      return this.$store.state.myobj.name
    },
    // setter
    set: function (newValue) {
      this.$store.commit('setName', newValue)
    }
  }
}

to use like this:

<instance-header v-model="fullName" />

How can I modify a various pieces of my Vuex from within a reusable nested component?

1 Answers