# 云开发 Vue 插件

云开发 Vue 插件 是云开发官方维护的 Vue 插件,提供全局入口、Vue 逻辑组件等功能。

# 安装

npm install --save @cloudbase/vue-provider

# 使用

下面我们使用 LoginState 组件,来动态绑定当前页面的登录态。

  • 页面初始化时,显示 '未登录'
  • 之后我们调用匿名登录,如果登录成功,则文案将变成 '已登录'
<template>
  <div id="app">
    <LoginState v-slot="{ loginState }">
      <h1>{{ loginState ? '已登录' : '未登录' }}</h1>
    </LoginState>
  </div>
</template>

<script>
  import Vue from "vue";
  import Cloudbase from "@cloudbase/vue-provider";

  Vue.use(Cloudbase, {
    env: "your-env-id"
  });

  export default {
    async created() {
      // 以匿名登录为例
      await this.$cloudbase.auth({ persistence: "local" }).anonymousAuthProvider().signIn();
    }
  };
</script>

# Plugin API

# Vue.$cloudbase

可以在 Vue 组件的 this.$cloudbase 中,获取 Cloudbase 实例

export default {
  data() {
    return {
      docs: []
    };
  },
  async created() {
    // 登录
    await this.$cloudbase.auth({ persistence: "local" }).signInWithTicket(ticket);
    // 数据库查询
    const queryResult = await this.$cloudbase.database().collection("test").where({}).get();
    this.docs = queryResult.data;
  }
};

# Components

组件 功能
LoginState 获取并绑定登录状态
DatabaseQuery 数据库查询
DatabaseWatch 数据库实时推送
CloudFile 获取云存储中的文件

# LoginState

获取登录状态

# Props

暂无

# Slots

slot type 描述
loginState null or LoginState 当前是否登录
loading boolean 是否加载中

# Example

<LoginState v-slot="{ loginState, loading }">
  <p>{{ loading ? '加载中' : (loginState ? '已登录' : '没登录') }}</p>
</LoginState>

# DatabaseQuery

数据库查询

# Props

prop type 描述
collection string 集合名
query function 返回自定的查询条件,如 _ => ({ foo: _.gt(2) })

# Slot

slot type 描述
docs Array<doc> 文档组成的数组
loading boolean 是否加载中
error null or Error 错误

# Example

<DatabaseQuery
  v-slot="{ docs, loading, error }"
  collection="messages"
  :query="_ => ({ timestamp: _.gt(1573635456709) })"
>
  <p v-for="{ text } in docs">
    {{ text }}
  </p>
</DatabaseQuery>

# DatabaseWatch

数据库实时监听

# Props

prop type 描述
collection string 集合名
query function 返回自定的查询条件,如 _ => ({ foo: _.gt(2) })

# Slot

slot type 描述
docs Array<doc> 文档组成的数组
loading boolean 是否加载中
error null or Error 错误

# Example

<DatabaseWatch
  v-slot="{ docs, loading, error }"
  collection="messages"
  :query="_ => ({ timestamp: _.gt(1573635456709) })"
>
  <p v-for="{ text } in docs">
    {{ text }}
  </p>
</DatabaseWatch>

# CloudFile

根据 FileID,获取云存储文件的真实 URL

# Props

slot type 描述
id string 云存储 ID,形如 cloud://...

# Slot

slot type 描述
url string 文件的真实 URL
loading boolean 是否加载中
error null or Error 错误

# Example

<CloudFile id="cloud://file-cloud-path" v-slot="{ url, loading }">
  {{ url ? url : 'loading...' }}
</CloudFile>