如何高效地创建Vuex状态属性的所有子属性的获取者和设置者？

Question

我在任何地方都找不到答案。

假设我们有一个Vuex store，里面有以下数据。

Vuex store

state: {
  dialogs: {
    dialogName1: {
      value: false,
      data: {
        fileName: '',
        isValid: false,
        error: '',
        ... 10 more properties 
      }
    },
    dialogName2: {
      value: false,
      data: {
        type: '',
        isValid: false,
        error: '',
        ... 10 more properties
      }
    }
  }
}

Dialogs.vue

<div v-if="dialogName1Value">
  <input 
    v-model="dialogName1DataFileName"
    :error="dialogName1DataIsValid"
    :error-text="dialogName1DataError"
  >

  <v-btn @click="dialogName1Value = false">
    close dialog
  </v-btn>
</div>
<!-- the other dialogs here -->

问题

假设我们需要在 Dialogs.vue.

有什么好的做法，可以有效的为每一个对话框属性创建getter和setter，而不用像这样全部手动操作。

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 

而这只是4个属性...

我想我可以通过编程在 created()但这真的是正确的方法吗？

是否有明显的，众所周知的解决这个问题的方法，我不知道？

Answer 1

getters 可以接受一个参数作为参数--这可以是你想返回的底层状态的 "部分"。这就是所谓的 方法式访问. 例如，你可以调用这个getter为：:

getFilename: (state) => (dialogName) => {
    return state.dialogs[dialogName].data.fileName
}

你可以将这个getter调用为

store.getters.getFilename('dialogName1')

请注意，方法式访问并不像属性式访问那样提供 "计算属性 "式的缓存。

Answer 2

如果只在一个中心函数中设置这些东西，你可以使用类似这样的东西。

<input 
  :value="dialogName1DataFileName"
  @input="update_inputs($event, 'fileName')">

// ...
methods:{
  update_inputs($event, whichProperty){
    this.$store.commit("SET_PROPERTIES", {newVal: $event.target.value, which:"whichProperty"})
  }
}

突变处理程序

// ..

mutations:{
  SET_PROPERTIES(state, payload){
    state.dialogName1.data[payload.which] = payload.newVal
  }
}

让我来解释一下我们上面所做的。首先我们将v-model类型改为 :value 和 @input 基础上。基本上你可以认为。:value 是 getter 和 @input 是 setter 为该属性。然后我们并没有先提交，而是调用 update_inputs 函数来提交，因为我们需要确定我们要提交的是哪个内部属性，所以我们把这个数据作为方法参数发送（例如上面的代码是'fileName'），然后，我们用新的数据值和哪个属性的信息来提交这个变化。你可以把这个逻辑融入到你的整个代码块中，这样就可以解决你的问题了。

还有一点，如果你想了解更多关于这篇文章的内容，会对你有更多的帮助。https:/pekcan.devv-model-using-vuex。