unicloud云开发进阶11-uni-id的logout退出登录与列表渲染

渲染

之前连表查询把uni-id-users的id绑定到了clouddemo数据表中，不能仅仅只是放在数据库里，需要渲染到页面

退出登录在store.js里

在demo1页面中引入store文件，（通过vuex的全局状态管理方式引入），退出登录就是写在这个文件的mutations对象里面的

<template>
  <view>
    <button @click="goLogin">登陆</button>
    <button @click="logout">退出登陆</button>
  </view>
</template>

<script>
  import {mutations} from "../../uni_modules/uni-id-pages/common/store.js"
  const db=uniCloud.database();
  export default {
    data() {
      return {
        
      }
    },
    onLoad() {
      
    },
    methods: {
      logout(){
        mutations.logout();
      },
      goLogin(){
        uni.navigateTo({
          url:""
        })
      }
    }
  }
</script>

在demo1页面，点击退出登录，登录信息被清空了

并且页面跳转到了微信登录页面

这里跳转到微信登录页面就是在store里写的，

uni.redirectTo({
    url: `/${pagesJson.uniIdRouter?.loginPage ?? 'uni_modules/uni-id-pages/pages/login/login-withoutpwd'}`,
});

把这里写死成通过账号密码登陆,然后在pages.json里把demo1页面配置成首页方便测试

uni.redirectTo({
    url: `uni_modules/uni-id-pages/pages/login/login-withpwd`,
});

把数据库获取到的数据渲染到页面

<template>
  <view>
    <button @click="goLogin">登陆</button>
    <button @click="logout">退出登陆</button>
    
    <view class="">{{listArr}}</view>
  </view>
</template>

<script>
  import {mutations} from "../../uni_modules/uni-id-pages/common/store.js"
  const db=uniCloud.database();
  export default {
    data() {
      return {
        listArr:[]
      }
    },
    onLoad() {
      this.getData()
    },
    methods: {
      getData(){
        db.collection("cloudDemo").get().then(res=>{
          this.listArr = res.result.data
        })
      },
      logout(){
        mutations.logout();
      },
      goLogin(){
        uni.navigateTo({
          url:""
        })
      }
    }
  }
</script>

使用uni-ui组件渲染数据

使用uni-list列表

文档在在uni-app中的组件部分，一开始在按uni-id-pages时以来就装好了，所以这里不用装就能用

<template>
  <view>
    <button @click="goLogin">登陆</button>
    <button @click="logout">退出登陆</button>
    
    <view>
      <uni-list>
      	<uni-list-item v-for="item in listArr" :title="item.title" :note="item.content"></uni-list-item>
      </uni-list>
      			 
    </view>
  </view>
</template>