Stimulus.js如何获取Controller中所有value实际值并转为数组？

要一次性获取所有实际的value值并转为数组，核心是利用Stimulus自动生成的${key}Value实例属性，结合遍历static values的键名来实现：

方法一：直接在connect中处理 #

connect() {
  // 拿到static values里所有配置项的键名
  const valueKeys = Object.keys(this.constructor.values);
  // 遍历键名，动态获取每个对应的实际值并组成数组
  const allValues = valueKeys.map(key => this[`${key}Value`]);
  
  console.log('所有实际value值数组:', allValues);
}

方法二：封装为实例属性（复用性更强） #

如果需要在多个地方使用，可以把逻辑封装成一个getter：

export default class extends Controller {
    static values = {
        test: 123,
        path: String,
        createUrl: String,
        mappedClasses: Array,
        columnDefs: Array,
        defaultSort: Object
    };

    // 封装成getter，随时获取所有value值数组
    get allValuesArray() {
        return Object.keys(this.constructor.values).map(key => this[`${key}Value`]);
    }

    connect() {
        console.log('所有实际value值数组:', this.allValuesArray);
    }
}

原理说明 #

Stimulus会根据static values里的每个配置项，自动在Controller实例上生成对应的${key}Value属性（比如test对应testValue，path对应pathValue），这些属性存储的就是实际的运行时值（包括默认值或DOM上设置的data属性值）。通过遍历this.constructor.values的键名，动态访问这些实例属性，就能一次性收集所有值并转为数组。

内容的提问来源于stack exchange，提问作者Developer