VueJS 中的功能切換

Question

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

雖然這是一個非常基本的示例，但我可以想象像這樣處理功能切換可能會變得更加復雜。

如何應用所描述的功能切換技術？

Answer 1

你檢查過這個 Vue 插件了嗎： https://www.npmjs.com/package/vue-feature-toggle ？

它對我來說看起來很有希望，並且可以幫助您實現目標。

注意：我將在接下來的幾個月內在 VueJS 中實現功能切換，因此仍在研究最佳方法。

更新：在我的例子中，我無法使用 vue-feature-toggle 庫按預期工作，所以我構建了一個自定義解決方案 - 保留功能切換，並與 function isFeatureToggled(featureToggleKey)混合

Answer 2

您也可以考慮將Unleash與vue-unleash-plugin一起使用。 這個插件需要你的項目使用 Vuex。

PS，我是 Unleash 的作者。 歡迎任何關於我們如何簡化與 Vue 集成的反饋。