yuheijotaki.com

フォーム入力バインディングを理解する その10

f:id:jotaki:20190212100544p:plain

何年か前に jQuery で作った type tester という簡易的なフォント（関連のスタイリング）のテスターツールを Vue.js で作ってみる。 その10

GitHub Pages： https://yuheijotaki.github.io/type-tester/
GitHub リポジトリ：https://github.com/yuheijotaki/type-tester

localStorage 用に vue-ls ライブラリを使ってリロード対策

これまでブラウザの再読込をした際に前回までの作業が記録されない状態だったので、localStorage を使って保存できるように実装する。
ピュアな JS でも書けそうですが、何個がライブラリがあった中で vue-ls を使用しました。

インストール

$ npm install vue-ls --save

/src/main.js（抜粋）

...
import VueLocalStorage from 'vue-ls'
Vue.use(VueLocalStorage)
...

順番的には、

  1. ローカルストレージにセットするメソッド setItem() 追加
  2. あるタイミングでセットする
  3. mounted() 時にセットされたローカルストレージを取得 getItem()
  4. 3.で取得した値で何かしらを実行

みたいな順序とイメージでつくりました

1. ローカルストレージにセットするメソッド setItem() 追加

data() で定義されている styleObject オブジェクトをセットするメソッドを追加します。

...
  methods: {
    ...
    setStylesInfo() {
      localStorage.setItem('styleObject', JSON.stringify(this.styleObject));
    }
  },
...
2. あるタイミングでセットする

ツールでカラーを変更した際にセットされるようにメソッドに追加します。

...
  methods: {
    changeColor: function (color) {
      this.styleObject['color'] = color;
      this.setStylesInfo();
    },
    ...
3. mounted() 時にセットされたローカルストレージを取得 getItem()
...
  mounted() {
    // ローカルストレージに styleObject があるかチェック
    const local_styleObject = localStorage.getItem('styleObject');
    if ( local_styleObject ) {
    }
  },
...
4. 3.で取得した値で何かしらを実行
... // 3.の if文の続き
    if ( local_styleObject ) {
      // ある場合、その styleObject を上書きする（CSS/テキストコンテンツにも適用される）
      this.styleObject = JSON.parse(local_styleObject) || []
      // color
      document.tools.colorPalette.value = this.styleObject['color'];
      document.tools.color.value = this.styleObject['color'];
      ...
    }
...

getItem() するときに JSON.parse() しないといけないなどちょっとつまづきましたが、特に styleObject の扱いはすごいやりやすかったです。

ただ子コンポーネントの各フォーム部品の値がセットされないので、

// color
document.tools.colorPalette.value = this.styleObject['color'];
document.tools.color.value = this.styleObject['color'];

のようにひとつずつセットしてあげる必要がありました。

参考リンク

次やること

結構形になってきたので次回で最後になりそうです。

  • 全体スタイリング