2

我想在我的 Vue 应用程序中添加一些“功能切换机制”。虽然我已经实现了一个相当基本的设置，但我想考虑一下Pete Hodgson 在这篇文章中描述的技术。尤其是“决策反转”方面看起来很有意义，但我正在努力了解如何使其适应我的 Vue 应用程序。

这就是我到目前为止所拥有的。

配置.js

const yn = require("yn");

const config = {
  // Add new feature toggles here
  features: {
    myFeature: parse(
      window.myaEnv.myFeature || process.env.VUE_APP_MY_FEATURE,
      false
    ),
  },
};

function parse(value, fallback) {
  if (typeof value === "undefined") {
    return fallback;
  }
  switch (typeof fallback) {
    case "boolean":
      return yn(value);
    case "number":
      return value ? JSON.parse(value) : fallback;
    default:
      return value;
  }
}

function feature(name) {
  return config.features[name];
}

export { config };

export default {
  install(Vue) {
    Vue.appConfig = config;
    Vue.feature = feature;

    Vue.prototype.$appConfig = config;
    Vue.prototype.$feature = feature;
  },
};

然后在例如一个组件中，我像这样切换可见性：

b-button(v-if="this.$feature('myFeature')") I'm visible only if feature is enabled

虽然这是一个非常基本的示例，但我可以想象功能切换可能会变得更加复杂，难以像这样处理。

如何应用所描述的功能切换技术？

4

2 回答 2

1

您是否检查过这个 Vue 插件： https ://www.npmjs.com/package/vue-feature-toggle ？

它对我来说很有希望，并且可以帮助您实现目标。

注意：我将在接下来的几个月内在 VueJS 中实现功能切换，因此仍在研究最佳方法。

更新：在我的情况下，我无法使用 vue-feature-toggle 库按预期完成所有工作，因此我构建了一个自定义解决方案 - 将功能切换保留在商店中，并与功能混合isFeatureToggled(featureToggleKey)

于 2020-10-01T11:52:40.710 回答
1

您也可以考虑将Unleash与vue-unleash-plugin一起使用。这个插件要求你的项目使用 Vuex。

PS！我是 Unleash 的作者，欢迎任何关于我们如何简化与 Vue 集成的反馈。

于 2021-01-21T18:52:27.100 回答