VueJS中的功能切换

问题描述

我想在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

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

但是我真的很努力地如何应用所描述的功能切换技术。

我找不到关于该特定主题的任何资源，所以也许您有想法？

解决方法

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

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

,

您是否检查了此Vue插件： https://www.npmjs.com/package/vue-feature-toggle吗？

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

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