javascript - VueJS 中的功能切换

Question

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

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

config.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

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

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

Answer 1

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

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