Have ideas to improve npm?Join in the discussion! »

    @cloudbase/vue-provider

    0.5.1 • Public • Published

    云开发 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>

    Keywords

    none

    Install

    npm i @cloudbase/vue-provider

    DownloadsWeekly Downloads

    15

    Version

    0.5.1

    License

    ISC

    Unpacked Size

    2.8 MB

    Total Files

    15

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar