上記記事の第二回。
Vue.jsとPusherのChatKitを使ってチャットアプリの作成をする、と言ってもコードはほとんどチュートリアルのコピペ。
install
@vue/cliは npx vue create . だと失敗して、globalにインストールしたものを実行したら普通にcreateできた。原因は後者で普通にインストールできたため調べていない。
Vue CLI v4.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Vuex, Linter, Unit
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
今回はTSを使った。ただし今の段階でchatkitの型定義ファイルがないのであまり意味がなかったかもしれない、面倒なのでほとんど any で通した。
面倒でなければ上記 PR を参考にコピペすればよさそう。
Vuex の型をどう書けばいいのかよくわからなかったので
この記事を参考にさせてもらってふわっと理解しておいた
vuex-persist
Vuexの情報をCookieやlocalStorageに保存するもの。以前こういったことをしたかったときにはvuex-persistedstateを使っていたんだけど、両者の違いはちょっとわからなかった。
vuex-persistedstate のほうが人気はありそうかな。
rooms?room?roomId?
mutation の setActiveRoom(state: any, roomId: any) の roomId はいかにも ID だけを set するように思えるが、これの中身が
{id: "roomID", name: "roomName"}
と、IDだけではなくNameも含まれていたりする。気になったので room にリネームした。このあたりは他の箇所でもわかりにくくて、async changeRoom({ commit }, room) は async changeRoom({ commit }: ActionContext<any, any>, roomId: string) 実際にはこんな感じで、room ではなく roomId がはいる。
感想
Vue.jsは3になったらもう一度勉強し直そうとおもっているのでしばらく触ってなかったんだけど、コードを読んでいて room が紛らわしいなと思ったところ以外ではとくにつらいところもなかった（難しそうな認証まわりはこのチュートリアルに含まれていないしね）。
ChatKit は無料でもそこそこ使える ので、なんかちょっとチャット作りたいなと思ったときにはすごい便利かもしれない。