TFS Widget：如何为多个小部件正确保存非配置代码中的值？

我来帮你搞定这个需求！你已经在使用ExtensionDataService加载历史数据了，接下来只需要补充保存数据的逻辑，再加上值对比、箭头显示的部分就能实现目标。以下是完整的实现方案：

1. 完整的ExtensionDataService操作逻辑 #

你需要在获取历史值后，完成「当前值与历史值的对比」，再「将当前值保存为新的历史值」。这里要特别注意首次无历史数据的默认值处理，以及数据类型的转换（因为ExtensionDataService默认存字符串）。

补全后的代码示例：

// 获取数据服务
VSS.getService(VSS.ServiceIds.ExtensionData).then(function(dataService) {
    // 替换成你实际业务中获取到的当前值
    const currentValue = 150;
    
    // 加载历史值
    dataService.getValue("PrevValues", {
        scopeType: "Default",
        scopeValue: "Current",
        defaultValue: ""
    }).then(function(savedValue) {
        // 处理首次无数据的情况，转成合理初始值（比如0）
        const prevValue = savedValue ? parseFloat(savedValue) : 0;
        
        // 判断箭头方向
        let arrowDirection = "";
        if (currentValue > prevValue) {
            arrowDirection = "↑"; // 向上箭头
        } else if (currentValue < prevValue) {
            arrowDirection = "↓"; // 向下箭头
        } else {
            arrowDirection = "→"; // 持平箭头（可选）
        }
        
        // 把结果渲染到Widget页面（示例）
        console.log(`当前值: ${currentValue}, 历史值: ${prevValue}, 趋势: ${arrowDirection}`);
        // 实际项目中可以替换成DOM操作：
        // document.getElementById("trend-arrow").textContent = arrowDirection;
        
        // 保存当前值作为下一次的历史值（转成字符串存储）
        dataService.setValue("PrevValues", currentValue.toString(), {
            scopeType: "Default",
            scopeValue: "Current"
        }).then(function() {
            console.log("历史值已更新");
        }).catch(function(err) {
            console.error("保存历史值失败:", err);
        });
    }).catch(function(err) {
        console.error("加载历史值失败:", err);
    });
});

2. 关键注意事项 #

• 权限配置：确保你的扩展已经申请了vso.extensiondata权限，在vss-extension.json里添加：

  "scopes": [
      "vso.extensiondata"
  ]
  

• 数据类型转换：ExtensionDataService仅支持存储字符串，所以读取后要转成数字再对比，保存时也要把数字转成字符串。
• 默认值处理：首次加载时savedValue为空字符串，一定要设置合理的初始值（比如0），避免对比时出现NaN错误。
• 错误捕获：添加catch块处理加载/保存失败的情况，方便后续排查问题。

3. 箭头的页面渲染示例 #

在Widget的HTML模板里提前准备元素：

<div class="widget-content">
    <span class="current-value"></span>
    <span class="trend-arrow"></span>
</div>

然后在代码里替换成实际值，并添加样式：

// 渲染当前值和箭头
const currentValueEl = document.querySelector(".current-value");
const arrowEl = document.querySelector(".trend-arrow");
currentValueEl.textContent = currentValue;
arrowEl.textContent = arrowDirection;

// 给箭头添加颜色区分
if (arrowDirection === "↑") {
    arrowEl.style.color = "#2ecc71"; // 绿色向上
} else if (arrowDirection === "↓") {
    arrowEl.style.color = "#e74c3c"; // 红色向下
}

这样每次Widget加载时，都会读取上一次的历史值，对比当前值显示对应箭头，再把当前值更新为新的历史值，完美实现你要的功能。

内容的提问来源于stack exchange，提问作者Sławomir Jakubowczak