state変更前のデータを取得したい。

Question

vue、vuexの質問です。

同じデータを2回、表示用データと検索用データとして入力しています。(store.jsのitemsとITEMS)
同じデータを２回入力せずに、１回の入力、１つのデータ(store.jsのitemsのみ）で

• 検索窓に入力された時は、入力文字が含まれている全てのデータを返す
• 検索窓が空の時は、全てのデータを返す

を実現するにはどうすればいいでしょうか？

環境

• vue-cli
• webpack
• "pug": "^2.0.0-rc.4",
• "pug-loader": "^2.3.0",
• "vue": "^2.4.4",
• "vuex": "^3.0.1"

構成

- src
- assets
- components
	- ItemCheckbox.vue
- vuex
	- actions.js
	- getters.js
	- mutation_types.js
	- mutations.js
	- store.js
- App.vue
- main.js

##実装
mutations.js

import * as types from './mutation_types'

export default {
  [types.FILTER_ITEMS](state, data){
　　　/*state.items= state.items.fiter~ だと連続で検索できない*/
     state.items = state.ITEMS.filter(function(item){
      return item.name.indexOf(data.name) > -1
    },this)
  }
}

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

const state = {
/* ここのデータをitemsのみにしたい*/
  items: [{"id":1,"name":"item1"},
          {"id":2,"name":"sample"},
          {"id":3,"name":"texttext"}],
  ITEMS: [{"id":1,"name":"item1"},
          {"id":2,"name":"sample"},
          {"id":3,"name":"texttext"}]
}

export default new Vuex.Store({
  state, mutations, getters, actions
})

ItemCheckbox.vue

<template lang="pug">
.form
  input(type="search", @input="onInput({ name: $event.target.value })")
  .form-checkbox(v-for="item in items", :key="item.id")
    label
      input(type="checkbox", :value="item.id", name="group[item_ids][]")
      span.custom-control-description {{item.name}}
</template>
<script>
  import { mapActions } from 'vuex'
  export default{
    props: ['items', 'name'],
    methods: mapActions({
      onInput: 'filterItems'
    })
  }
</script>

Comments

[karamarimo]

「検索用データ(ITEMS)を保持しておくにはどうすればいいか」というご質問ですが、すでにできていませんか？

[退会済みユーザー]

修正依頼ありがとうございます。質問文を修正いたしました。 現在同じデータを２回入力しているので、１つのデータで表示、検索の両方を行うにはどうしたらいいのかを伺いたいです。

Answer 1

特に必要ないのであれば、フィルターした結果をstateに格納するのではなく、フィルターする関数をgetterとして用意し、コンポーネントからそれを使用すればいいです。

inputの値もv-modelで変数とバインドすれば、computedと組み合わせてdeclarativeに検索結果を表示できます。

CodeSandbox Demo

getter

  getters: {
    filterItems: ({ items }) => (query) => {
      return items.filter(item => item.name.indexOf(query) > -1)
    }
  }

component template

<input type="text" v-model="query">

<li v-for="item in displayedItems">{{item.name}}</li>

component script

	data() {
		return {
			query: ""
		}
	},
	computed: {
		...mapGetters(['filterItems']),
		...mapState(['items']),
		displayedItems() {
			if (this.query) {
				return this.filterItems(this.query)
			}
			return this.items
		}
	}

参考
Getters - Vuex

Comments

[退会済みユーザー]

解答ありがとうございます！

データはstoreにまとめておく，
データをいじるのであればmutationでやらなければいけないと思い込んでいました．

共通で必要なデータであればstoreへ，そうでなければコンポーネントに置いておく．
ソート，フィルターなど．データそのものを変更しない場合はgetter，値の変更などデータの変更であればmutationで行えばいいんですね．

サンプルコードありがとうございます！
...演算子や，mapStateがあることを知り，勉強になりました！