Vuex store getter を store 内部で試してみる

why

仕事で必要になったから

Vuex の getter setter とは

Vuex はフロントエンド側にコンポーネントを凌駕した状態を持たせるもの。

Store という 大枠の中に、state を定義して その getter setter を作成する。

バックエンドの getter setter を逐次呼び出さずに、

なぜもう一度フロントで定義し直しているのかは不明。

getter で作ってみる

vuex.vuejs.org

コンセプト

よく使う、配列の最大数を計算するようなメソッドを

各コンポーネントの computed に置いてもキリがない

だから毎回それを呼び出せば済むように、共通化のために getter がある。

todo store を定義して done を数える getter を定義する

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'todo1', done: true, },
      { id: 2, text: 'todo2', done: false, },
      { id: 3, text: 'todo3', done: true, },
      { id: 4, text: 'todo4', done: true, },
    ]
  },

store を定義して、state に

やることリストの

完遂した1, 終わってない2, 完遂した3, 完遂した4,

の配列を用意する

  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  },

次に、getter として 終了したやることを取る関数を作成。

console.table(store.getters.doneTodos) 

これを呼び出すと

未完了の todo2 以外が出力される。

さらにこれをちゃんともともと何のためにあるかを考えて、別のコンポーネントでも呼び出して試す必要がある。

App コンポーネントで呼び出す

未実装

setter を作る

計算する時に、state の値を更新するのに setter が必要になる

React Hooks の useState の setState のようなものだと解釈する