云函數Todo重構+Vue客戶端調用的示例分析

云函數Todo重構+Vue客戶端調用的示例分析，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

先配置一個添加任務的函數。

注意，配置文件不能幫我們在本地創建文件及文件夾，不具備小程序的能力，所以，寫好配置文件，我們需要自己創建對應的代碼目錄及文件。

代碼寫好之后，如何進行本地測試呢？還記得之前我們使用的 SCF 這個工具嗎？沒錯，就用它就行了。

然后再使用 Postman 發個請求試試：

測試完成后，我們可以使用 tcb 命令進行全量部署。注意，全量部署時，vue 也會跟隨打包并部署到靜態站點中，如果只想部署單個云函數，可以使用命令 tcb fn deploy add 對 add 這個函數單獨部署：

部署完成后可以登錄云控制臺查看，也可以在本地使用 tcb fn list 查看已部署的函數列表。

Vue 客戶端調用

在 Vue 中調用云函數，與傳統方式不一樣的是，我們不需要自己發送 HTTP 請求，騰訊官方封裝了 Vue 插件：vue-provider。

地址：https://github.com/TencentCloudBase/cloudbase-vue

在我們構建的項目中已經引入了該插件。在 main.js 中修改我們的環境參數，就可以使用了。

同時，在 index.html 中，還會默認加載一個靜態的配置文件 _init_tcb-env.js，其實就是環境的配置參數。因為我們已經在  main.js 配置了環境參數，因此，直接屏蔽這個文件即可。

完成這些配置之后，我們在 Vue  中完成添加任務的功能，進行測試。但是，這里有個坑，騰訊在這個地方是個小學生收割機，收割了我1個小時的時光我才搞清楚，callFunction 調用的傳參與  HTTP 觸發器調用的 event 入參是不一樣的，一定注意!手冊中沒有寫明這一點。

手冊地址：https://docs.cloudbase.net/cloud-function/how-works.html

callFunction 調用的云函數 event 的入參就是傳入 callFunction 的  data，沒有請求信息數據，所以云函數的代碼一定記得修改。

此時，我們會收到一個沒有權限的報錯，這是因為調用云函數必須要進行登錄鑒權，我們暫時先使用匿名登錄的方式，調通接口的數據通信，后面我們再詳細介紹  Cloudbase 的用戶管理服務器。

但是，就算是使用匿名登陸也是個坑，控制臺中登錄鑒權的實例代碼是錯誤的，正確的代碼示例在文檔中心那里。

文檔中心地址：

https://docs.cloudbase.net/authentication/anonymous.html

當然，光有代碼還不夠，你還需要到控制臺中開啟應用允許匿名登錄的選項才行。不過一般都是默認就開通的，這里就不再細說了，通過登錄驗證后，我們終于可以去罵罵騰訊寫的垃圾文檔了。

看完上述內容，你們掌握云函數Todo重構+Vue客戶端調用的示例分析的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！