2023-06-20 uniapp 使用插件 uni-data-picker 报错：[Vue warn]: Error in nextTick: "TypeError: db.collection is not a function"

前言：项目中引用了uni-data-picker插件，其官方代码如下：

 <uni-data-picker placeholder="请选择地址" popup-title="请选择城市" c
　　　　ollection="opendb-city-china" field="code as value, name as text" orderby="value asc" 
　　　　:step-searh="true" self-field="code" parent-field="parent_code"
　　　　 @change="onchange" @nodeclick="onnodeclick"
>
</uni-data-picker>

看这里！你这个报错是因为用了云端数据！！如果你要用后端接口返回的数据就用本地数据就可以了！！

一共报了3个错误：

1、chunk-vendors.js:3014 [Vue warn]: Error in nextTick: "TypeError: db.collection is not a function"

2、[system] TypeError: db.collection is not a function

3、Uncaught (in promise) Error: 应用未关联服务空间，请在uniCloud目录右键关联服务空间

1和2的意思我猜测是什么数据库没有被创建所以报错，3的报错就是uniapp提示我们要去创建一个云服务空间来存储数据。

这时候脑袋灵光的人就能看出来，上面我所引用的代码时使用了云端数据的uni-data-picker，必须创建或在已拥有云服务空间的情况下才能使用。

所以，要么你去创建【uniClound的服务空间】，要么你拿后台返回的数据用来展示，这无疑是选择后者，而我现在是测试，刚好又有省市区的json，我可以用这个json文件来模拟数据。

官方代码：

<template>
  <view>
    <uni-data-picker :localdata="items" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        items: [{
          text: "一年级",
          value: "1-0",
          children: [
            {
              text: "1.1班",
              value: "1-1"
            },
            {
              text: "1.2班",
              value: "1-2"
            }
          ]
        },
        {
          text: "二年级",
          value: "2-0"
        },
        {
          text: "三年级",
          value: "3-0"
        }]
      }
    },
    methods: {
      onchange(e) {
        const value = e.detail.value
      },
      onnodeclick(node) {
      }
    }
  }
</script>

插件地址：https://uniapp.dcloud.net.cn/component/uniui/uni-data-picker.html#%E4%BB%8B%E7%BB%8D