title: How to create getters and setters for all sub-properties of a Vuex state property efficiently?
body: <p>I couldn't find the answer anywhere.</p>
  
  <p>Let's say we have Vuex store with the following data:</p>
  
  <h2>Vuex store</h2>
  
  <pre class="lang-js prettyprint-override"><code>state: {
    dialogs: {
      dialogName1: {
        value: false,
        data: {
          fileName: '',
          isValid: false,
          error: '',
          ... 10 more properties 
        }
      },
      dialogName2: {
        value: false,
        data: {
          type: '',
          isValid: false,
          error: '',
          ... 10 more properties
        }
      }
    }
  }
  </code></pre>
  
  <h2>Dialogs.vue</h2>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div v-if="dialogName1Value"&gt;
    &lt;input 
      v-model="dialogName1DataFileName"
      :error="dialogName1DataIsValid"
      :error-text="dialogName1DataError"
    &gt;
  
    &lt;v-btn @click="dialogName1Value = false"&gt;
      close dialog
    &lt;/v-btn&gt;
  &lt;/div&gt;
  &lt;!-- the other dialogs here --&gt;
  </code></pre>
  
  <h2>Question</h2>
  
  <p>Let's say we need to modify some of these properties in <code>Dialogs.vue</code>.</p>
  
  <p>What's the best practices for creating a getter and setter for every dialog property efficiently, without having to do it all manually like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>computed: {
    dialogName1Value: {
      get () {
        return this.$store.state.dialogs.dialogName1.value
      },
      set (value) {
        this.$store.commit('SET', { key: 'dialogs.dialogName1.value', value: value })
      }
    },
    dialogName1DataFileName: {
      get () {
        return this.$store.state.dialogs.dialogName1.data.fileName
      },
      set (value) {
        this.$store.commit('SET', { key: 'dialogs.dialogName1.data.fileName', value: value })
      }
    },
    dialogName1DataIsValid: {
      get () {
        return this.$store.state.dialogs.dialogName1.data.isValid
      },
      set (value) {
        this.$store.commit('SET', { key: 'dialogs.dialogName1.data.isValid', value: value })
      }
    },
    dialogName1DataIsError: {
      get () {
        return this.$store.state.dialogs.dialogName1.data.error
      },
      set (value) {
        this.$store.commit('SET', { key: 'dialogs.dialogName1.data.error', value: value })
      }
    },
    ... 10 more properties 
  </code></pre>
  
  <p>And this is only 4 properties...</p>
  
  <p>I suppose I could generate those computed properties programmatically in <code>created()</code>, but is that really the proper way to do it?</p>
  
  <p>Are there obvious, commonly known solutions for this issue that I'm not aware of?</p>