Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はJS編その1としてコードの全体像を見ていきました。今回から詳細編。ひとまずVueインスタンス本体以外の部分を見ていきます。localStorageの設定もありました。それではいきましょう!
【目次】
※前回:【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-1) - クモのようにコツコツと
Todoリスト完成品とJSコード全体像
完成品と前回まとめたJSの全体像。
See the Pen Vue de Localstarage by イイダリョウ (@i_ryo) on CodePen.
// Full spec-compliant TodoMVC with localStorage persistence // and hash-based routing in ~120 effective lines of JavaScript. // localStorage persistence var STORAGE_KEY = 'todos-vuejs-2.0' var todoStorage = { //処理 } // visibility filters var filters = { //処理 } // app Vue instance var app = new Vue({ //処理 }) // handle routing function onHashChange () { //処理 } window.addEventListener('hashchange', onHashChange) onHashChange() // mount app.$mount('.todoapp')
詳細は前回記事参照。
※参考:【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-1) - クモのようにコツコツと
JSコード詳細
いよいよJSコードの詳細を見ていく。
変数STORAGE_KEY
と変数todoStorage
冒頭コメント。
localStorageの持続性
// localStorage persistence var STORAGE_KEY = 'todos-vuejs-2.0' var todoStorage = { fetch: function () { var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]') todos.forEach(function (todo, index) { todo.id = index }) todoStorage.uid = todos.length return todos }, save: function (todos) { localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)) } }
- 変数
STORAGE_KEY
に値todos-vuejs-2.0
を入れる - 変数
todoStorage
の値は連想配列 fetch
キーの値は無名関数- 変数
todos
にてlocalStorage
にgetItem()
で取得した値をJSON.parse()
でJSONをJSに変換。 引数はSTORAGE_KEY
、または空の配列'[]'。 todos
をforEach
ループ、無名関数で引数にtodo
とindex
todo
のid
プロパティをindex
にtodoStorage
の.uid
プロパティをtodos
の数length
にtodos
を返すsave
キーの値は無名関数で引数はtodos
localStorage
にsetItem()
で値をセット。第1引数STORAGE_KEY
、第2引数JSON.stringify()
でtodos
をJSONに変換。
ここでlocalStorageが出てきた!
まず変数STORAGE_KEY
に前々回のHTML、CSS編で触れたlocalStorageのキーを入れている。
次に変数todoStorage
のfetch:
キーでSTORAGE_KEY
から得た値を入れて、それをindexにループしている。
uid
には値の数を入れている。save:
キーではtodos
の値をSTORAGE_KEY
に追加している。
変数filters
可視性フィルタ
// visibility filters var filters = { all: function (todos) { return todos }, active: function (todos) { return todos.filter(function (todo) { return !todo.completed }) }, completed: function (todos) { return todos.filter(function (todo) { return todo.completed }) } }
- 変数
filters
は連想配列 all
キーの値は無名関数で引数はtodos
todos
を返すactive
キーの値は無名関数で引数はtodos
todos
のfilter()メソッドを返す。引数は無名関数でその引数は
todo`todo
のcompleted
以外を返すcompleted
キーの値は無名関数で引数はtodos
todos
のfilter()メソッドを返す。引数は無名関数でその引数は
todo`todo
のcompleted
を返す
変数filters
の連想配列の中でall
キーはtodos
自体を返す。active
キーはcompleted
以外を返す。completed
はcompleted
を返す。
変数app
(次回へ…)
app Vueインスタンス
ここがVueインスタンスの本丸でかなりのボリューム。なのでここは次回に回したく。。
(全体像はこんな感じ)
// app Vue instance var app = new Vue({ // app initial state data: { //処理 }, // watch todos change for localStorage persistence watch: { //処理 }, // computed properties // http://vuejs.org/guide/computed.html computed: { //処理 }, filters: { //処理 }, // methods that implement data logic. // note there's no DOM manipulation here at all. methods: { //処理 }, // a custom directive to wait for the DOM to be updated // before focusing on the input field. // http://vuejs.org/guide/custom-directive.html directives: { //処理 } })
関数onHashChange()
ルーティングを処理する
// handle routing function onHashChange () { var visibility = window.location.hash.replace(/#\/?/, '') if (filters[visibility]) { app.visibility = visibility } else { window.location.hash = '' app.visibility = 'all' } }
- 関数
onHashChange()
の設定 - 変数
visibility
でハッシュの記号を空に置き換える - もし
filters
の配列の値がvisibility
なら app
のvisibility
をvisibility
に- さもなくば
- ハッシュを空に
app
のvisibility
をall
に
ページ内リンクでURLの後ろに付くハッシュについての設定。上記の変数filters
も関連している。
置き換えreplace()
についてはこちらを参照
※参考:String.prototype.replace() - JavaScript | MDN
マウント
最後にマウントは前回にも触れた。
vm.$mount( [elementOrSelector] )
Vueインスタンスの中にel
オプションはない代わりにここで. todoapp
タグの紐づけている。
またまた続きます…
処理の詳細、Vue本体以外の部分は見れた。まだ全体が見れていないので関連のイメージが不完全だけど、localStorageの設定は変数STORAGE_KEY
、変数todoStorage
あたりに書いてあることがわかった!次回にVue本体で全体が見ていきます。それではまた!
※続き書きました!
※参考:Vue.jsの習得のためにやったことまとめ
qiita.com