敏捷开关 Vue ffc-js-client-side-sdk demo

集成 SDK 到已有的 Vue 项目

安装 SDK

npm install ffc-js-client-side-sdk --save

将 src/ffc 文件夹复制到项目中，打开 src/ffc/config.js 文件并且将 secret 替换为您自己环境的 secret

export const option = {
    secret: "USE_YOUR_ENVIRONMENT_SECRET", // 替换为自己环境的 secret
    anonymous: false,
    // 请使用您自己的 user 信息，如果 暂时没有 user 信息可忽略此参数并将 anonymous 设为 true, 
    // 之后可以调用 ffcClient.identify(user) 方法传入 user
    user: {
        id: 'my-user',
        userName: 'my user',
        email: '',
        customizedProperties: [
            {
                "name": "sex",
                "value": "male"
            }]
    },
    devModePassword: 'thisisademo' // 激活开发者模式的密码，非必须
}

可以调用如下方法切换用户

ffcClient.identify(user);

使用开关

<script>
import { ffcStore } from "./ffc";
</script>

<template>
  <div className="App">
    <header className="App-header">
      <div>Hello {{ffcStore.flags["hello"]}} </div>
      <Counter v-if="ffcStore.flags['counter'] === 'true'"/>
    </header>
  </div>
</template>

如果想了解更多关于 SDK 的使用方法, 请阅读 SDK readme

运行 Demo

前往 https://portal.featureflag.co 创建项目和环境
在环境中创建两个开关
1. hello : 两个返回值，分别为 World 和 Universe
2. counter : 两个返回值，非别为 true 和 false
打开 src/ffc/config.js 文件并且将 secret 替换为您自己环境的 secret

export const option = {
    secret: "USE_YOUR_ENVIRONMENT_SECRET", // 替换为自己环境的 secret
    anonymous: false,
    user: { // 运行 demo 时可以不用改
        id: 'my-user',
        userName: 'my user',
        email: '',
        customizedProperties: [
            {
                "name": "sex",
                "value": "male"
            }]
    },
    devModePassword: 'thisisademo' // 激活开发者模式的密码，非必须
}

运行程序

npm install
npm run dev

运行结果:
1. Hello World
2. Hello Universe
3. 激活 counter 模块

feature-flags-co/ffc-js-client-side-sdk-vue-demo

敏捷开关 Vue ffc-js-client-side-sdk demo

集成 SDK 到已有的 Vue 项目

运行 Demo