firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ④

前置き

チャットシリーズの続きです✨
今回はVuexに移行していきます❣️
これが終わったら
本当にCSSです…😂笑

【Nuxt.js】開発ブログ:firebaseでチャットアプリ①
【Nuxt.js】開発ブログ:firebaseでチャットアプリ②
【Nuxt.js】開発ブログ:firebaseでチャットアプリ③


Vuexに移行

⬇️Vuexは解説記事を
 いくつか出していますが
 簡潔に使い方を
 まとめたものはこちらです❤️
【Nuxt.js】Vuexまとめ編:はじめる前に、簡単理解!

まずは取得データのpostsを移行

index.vueにあったposts
store/index.jsに移します🚗💨

fetchactionsを呼び出して
最初にpostsを取得していきます。
stateの上書きは
mutationsでしかできないので
actionsの最後にcommitで呼び出します。

あとはsubmitを最後にして
他の物から移行していきます。


loginを移行

mutations
stateの上書きをしていても
このエラーが出ました。
一旦配列にpushすれば解決。

Error

Do not mutate vuex store state outside mutation handlers


画像部分の移行

inputで選択した画像を表示させつつ、
submitした時にデータを送信📤

ということで
reader.readAsDataURL(thumbnail)して
urlをstateに入れて
表示させようとしたのですが
これはできませんでした。
<img :src="$store.getters['change/thumbnail']" alt="">

バインドするdatastateに置き換わっているので
こう書くしかないんですよね…。

そもそもimgで表示させるのではなく
inputに表示させてみる方が
良いかもしれません🤔💭

というより、
プレビューだけなら
Vuexにする必要もないかもです。
readerで何をしているか明確にし、
分けていこうと思います💡


textareaの選択した文字に装飾(ボツネタ)

コードを共有したい時
選択範囲のテキストを
コード用の装飾に変更します。

なのでtextarea内の
選択範囲の先頭と後ろに
タグを追加して
実装しようとしていました。

ただ、

そもそもtextarea
タグを入れてはいけない

ようで…
ボツになりました笑

参考になるか分かりませんが
それまでの道のりを
記しておきます…。

参考:
javascript 選択中のテキストを取得する
範囲選択した文字列を修飾する
JavaScript初級者から中級者になろう

v-htmlで表示確認

とりあえず
メッセージ入力部分が
inputになっていたので
textareaに変更。

textarea
手打ちでタグを適当に入れて
v-htmlで表示させてみます。
<p style="color: red;">red</p>

firebase上では
こんな感じ。

表示部分

ということで
あとは選択範囲を認識させて
spanタグとかをつけて
firebaseに送信できれば
大丈夫そうです🙆‍♀️


選択範囲の認識

そもそもtextareaに
タグを直接入れてはいけないので
<&gt;
>&lt;
に変更する必要はありそう。

参考:
選択(Selection) と 範囲(Range)
テキストエリア内にタグ?

selectイベントで
まずは選択範囲の
文字列だけ取得します💫

methods
選択範囲の
Selectionオブジェクトを取得。

ここからRangeオブジェクトを取得
とりあえずgetRangeAtの引数は
空ではダメっぽい。

TypeError: Failed to execute 'getRangeAt' on 'Selection': 1 argument required, but only 0 present.

rangenode追加
とりあえず
nodeの種類もよく分からないので
createTextNodeを使ってみました。
https://qiita.com/mima_ita/items/bacf3ca3c078d1e6c70f
どこにタグが来るのか
チェックするためこれだけ追記。

ところが。。。
textarea内の文字列を選択しても
枠の外にタグが追加されます。。。
そもそもタグではなく文字列扱いに。
createElementも試しましたが
何も追加されませんでした。

やっぱりtextarea
タグを入れること自体
よくないようですね。

無難にエディタを使用した方が良さそうです。
https://qiita.com/mima_ita/items/bacf3ca3c078d1e6c70f


まとめ

Vuexに慣れてきたものの、
画像のところで
詰まってしまいました😖💦
ただ次にやれば良いことが
見えてきたので必ず移行させます…❗️

移行して機能に問題なければ
CSS整えて完成予定です…❣️

そして今回はボツになってしまった
選択範囲の装飾。
CSSとかの方がよっぽど大事ですが
気になるので調べまくりました。。。
でも無駄だったというのが
とても悲しいです😭笑
まぁそんな時もありますよね←

-firebase
-,

© 2021 aLiz Nuxt