Vue.js 如何高效地为Vuex状态属性的所有子属性创建getter和setter？

我到处都找不到答案

假设我们有Vuex存储，其中包含以下数据：

Vuex商店

状态：{
对话：{
对话框名称1：{
值：false，
数据：{
文件名：“”，
isValid:false，
错误：“”，
…还有10处房产
}
},
对话框名称2：{
值：false，
数据：{
类型：“”，
isValid:false，
错误：“”，
…还有10处房产
}
}
}
}

Dialogs.vue

关闭对话框

问题: 假设我们需要在

Dialogs.vue

中修改其中一些属性

高效地为每个对话框属性创建getter和setter的最佳实践是什么，而不必像这样手动执行所有操作：

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

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

计算：{
dialogName1Value：{
得到（）{
返回此值。$store.state.dialogs.dialogName1.value
},
设置（值）{
这个.$store.commit（'SET'，{key:'dialogs.dialogName1.value'，value:value}）
}
},
DialogName1数据文件名：{
得到（）{
返回此文件。$store.state.dialogs.dialogName1.data.fileName
},
设置（值）{
这是。$store.commit（'SET'，{key:'dialogs.dialogName1.data.fileName'，value:value}）
}
},
dialogName1DataIsValid:{
得到（）{
返回此值。$store.state.dialogs.dialogName1.data.isValid
},
设置（值）{
这是。$store.commit（'SET'，{key:'dialogs.dialogName1.data.isValid'，value:value}）
}
},
DialogName1数据库错误：{
得到（）{
返回此值。$store.state.dialogs.dialogName1.data.error
},
设置（值）{
这是。$store.commit（'SET'，{key:'dialogs.dialogName1.data.error'，value:value}）
}
},
…还有10处房产

这只是4个属性

我想我可以在

created（）

中以编程方式生成这些计算属性，但这真的是正确的方法吗

---

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

getters

可以将参数作为参数-这可以是您想要返回的基础状态的“部分”。这称为。例如：

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

然后，您可以将此getter称为：

store.getters.getFilename('dialogName1')

---

请注意，方法样式访问不提供通过属性样式访问获得的“计算属性”样式缓存。

getters

可以将参数作为参数-这可以是您要返回的基础状态的“部分”。这称为。例如：

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

然后，您可以将此getter称为：

store.getters.getFilename('dialogName1')

---

请注意，方法样式访问不提供通过属性样式访问获得的“计算属性”样式的缓存。

要仅在一个中心函数中设置这些内容，可以使用以下方法：

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

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

让我进一步解释一下我们上面所做的。首先，我们将v-model类型更改为

：value

和

@input

base。基本上你可以认为，

：value

是

getter

，而

@input

是

setter

这个属性。然后我们没有首先提交，我们调用update\u inputs函数来提交because我们应该确定我们将提交哪个内部属性，因此我们确实将此数据作为方法参数发送（例如，上面的代码是“fileName”），然后，我们使用新的数据值和属性将更改的信息提交此更改。您可以将此逻辑放入整个代码块中，它将解决您的问题

还有一点，如果您想了解更多有关本文的信息，将有助于您：

---

要仅在一个中心功能中设置这些内容，您可以使用以下方法：

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

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

让我进一步解释一下我们上面所做的。首先，我们将v-model类型更改为

：value

和

@input

base。基本上你可以认为，

：value

是

getter

，而

@input

是

setter

这个属性。然后我们没有首先提交，我们调用update\u inputs函数来提交because我们应该确定我们将提交哪个内部属性，因此我们确实将此数据作为方法参数发送（例如，上面的代码是“fileName”），然后，我们使用新的数据值和属性将更改的信息提交此更改。您可以将此逻辑放入整个代码块中，它将解决您的问题

还有一点，如果您想了解更多有关本文的信息，将有助于您：

---

感谢您提供了一个解决方案。但是我如何将setter合并到这个中呢？这难道不会比仅仅使用computed

get（），set（）

添加更多的样板文件吗？正如您从exampleVuex getter中看到的那样，这看起来已经很可笑了（请注意与computed property getter的区别）实际上与计算属性相同。因此，您不需要使用

get

和

set

的计算属性，只需使用

$store.get

和

$store.commit

，感谢您提供了一个解决方案。但我如何将setter合并到这其中呢？这难道不会比使用computedget（），set（），从exampleVuex getter中可以看出，这看起来已经很可笑了（请注意与计算属性getter的区别）实际上与计算属性相同。因此您不需要使用

get

和

set

的计算属性，只需使用

$store.get

和

$store.commit

谢谢您提供的解决方案。不过，我不确定该方法在我的情况下有多大用处，它基本上为r我已经拥有的动态设置器。我已经可以使用它设置所有属性，例如：

$store.commit（'set'，{key:'dialogs.dialogName1.data.fileName'，value:value}）

。我正在寻找一种更通用的方法。我决定只为的所有子属性自动生成计算属性