【Vue.js】localStorageと連携したTodoリストを読み解く（JS編-2）

Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はJS編その1としてコードの全体像を見ていきました。今回から詳細編。ひとまずVueインスタンス本体以外の部分を見ていきます。localStorageの設定もありました。それではいきましょう！

【目次】

Todoリスト完成品とJSコード全体像
JSコード詳細
またまた続きます…

※前回：【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'
  }
}