如何在组件方法中拥有可访问的变量

Question

我正在开发一个组件，负责将我的用户注册到 Sinch（voip 平台）。为了让我的注册工作，我需要有一些在我的组件方法中可以访问的变量。我想知道这应该如何使用 vue 完成。

我需要我的变量 sinchClient 可以在我的方法 newUserRequest() 和 loginRequest()

中访问

有什么建议吗？

辛奇变量

var sinchClient = new SinchClient({
  applicationKey: "My-Key",
  capabilities: {
    messaging: true,
    calling: true
  },
  supportActiveConnection: true,
  onLogMessage: function(msg) {
    console.log(msg);
  }
});

方法

<script>
export default {
  data() {
    return {
      username: null,
      name: null,
      password: null,
      loggedIn: false
    };
  },
  mounted() {},
  methods: {
    newUserRequest() {
      console.log(this.name, this.password);

      if (this.name && this.password) {
        var handleSuccess = () => {
          console.log("User created");
          this.loggedIn = true;
          this.name = sinchClient.user.userId;
        };
        var handleFail = error => {
          console.log(error.message);
        };

        var signUpObject = { username: this.name, password: this.password };
        sinchClient
          .newUser(signUpObject)
          .then(sinchClient.start.bind(sinchClient))
          .then(() => {
            localStorage[
              "sinchSession-" + sinchClient.applicationKey
            ] = JSON.stringify(sinchClient.getSession());
          })
          .then(handleSuccess)
          .fail(handleFail);
      }
    },
    logInRequest() {
      if (this.name && this.password) {
        var handleSuccess = () => {
          console.log("User logged in");
          this.loggedIn = true;
          this.name = sinchClient.user.userId;
        };
        var handleFail = error => {
          console.log(error.message);
        };
        var signUpObject = { username: this.name, password: this.password };
        sinchClient
          .start(signUpObject)
          .then(() => {
            localStorage[
              "sinchSession-" + sinchClient.applicationKey
            ] = JSON.stringify(sinchClient.getSession());
          })
          .then(handleSuccess)
          .fail(handleFail);
      }
    }
  }
};
</script>

Answer 1

您可以全局定义 sinchClient 并使用 window (window.sinchClient) 访问它。更好的是，您可以创建一个 Vue 插件并将其注入到应用程序上下文中：

var sinchClient = new SinchClient({
  applicationKey: "My-Key",
  capabilities: {
    messaging: true,
    calling: true
  },
  supportActiveConnection: true,
  onLogMessage: function(msg) {
    console.log(msg);
  }
})
Vue.use({
  install: function(Vue) {
    Object.defineProperty(Vue.prototype, '$sinchClient', {
      get () { return sinchClient }
    })
  }
})

并在 Vue 上下文

中使用 this.$sinchClient 访问它

如何在组件方法中拥有可访问的变量

how to have accessible variables in component methods

javascript

vue.js

sinch