Vue.js + vuexで絞り込み検索する際に出てくる'state' is defined but never usedエラーを解決したい

前提・実現したいこと

下記のサイトを参考にして
Vue.js + vuexで絞り込み検索するアプリケーションを作っています。

こちらのプログラムを元にして、
QiitaAPIからリストを読み込まずに、自分で定義したitemListを読み込もうとすると
以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

Failed to compile.

./src/store/modules/item.js
Module Error (from ./node_modules/eslint-loader/index.js):

/home/ec2-user/environment/manapo/src/store/modules/item.js
  20:28  error  'state' is defined but never used  no-unused-vars
  32:22  error  'state' is defined but never used  no-unused-vars

✖ 2 problems (2 errors, 0 warnings)

該当のソースコード

itemList.js

javascript
1const itemList = {
2  // 元々のコードのitems:[]をコメントアウト。初期値をこちらに設定してしまう形に変更,
3  // items:[],
4  items: [
5    {
6            method: "クレカ",
7            point:5000,
8            title:"LinePayクレジットカード",
9            rating:3
10        },  
11        {
12            method: "QR",
13            point:0,
14            title:"PayPay",
15            rating:4
16        },
17        {
18            method: "QR",
19            point:1000,
20            title:"d払い",
21            rating:4
22        }  
23  ],
24  queryParams: {
25    per_page: 2,
26    page: 1,
27    query: null
28  },
29  isLoading: false
30}
31
32export default itemList

item.js

JavaScript
1import {cloneDeep} from 'lodash-es'
2
3import types from '../mutation-types'
4import initialState from '../initialState/itemList'
5// qiitaAPIをコメントアウト
6// import qiitaApi from '../../api/qiitaApi'
7
8const namespaced = true
9
10const state = cloneDeep(initialState)
11
12const getters = {
13  state: state => state,
14  queryParams: state => state.queryParams
15}
16
17const actions = {
18  setQueryParams ({commit, state}, queryParams) {
19    commit(types.SET_ITEM_LIST_SORT_DATA, {queryParams})
20  },
21  execGetItems ({commit, state}, queryParams) {
22    commit(types.SEND_ITEM_LIST_REQUEST)
23　　// qiitaAPIをコメントアウト
24    // return qiitaApi.getItems(queryParams)
25    // qiitaApiからデータ取得しているのはここ
26    // アイテムのゲット元Qiitaからlocalのitemsに置き換えたい
27    // ここで取得したいのは、itemListの中のjs。cloneDeepでディープコピーしているから
28    // このitem.js内においては、stateに同一内容が入っていると考えた
29    return state.itemList.items.getItems(queryParams)
30  },
31  setItems ({commit, state}, payload) {
32    commit(types.RECEIVE_ITEM_LIST_RESPONSE, payload)
33  }
34}
35
36const mutations = {
37  [types.SET_ITEM_LIST_SORT_DATA] (state, {queryParams}) {
38    Object.assign(state.queryParams, queryParams)
39  },
40
41  [types.SEND_ITEM_LIST_REQUEST] (state) {
42    state.isLoading = true
43  },
44
45  [types.RECEIVE_ITEM_LIST_RESPONSE] (state, payload) {
46    state.isLoading = false
47    Object.assign(state, {items: payload})
48  }
49}
50
51export default {
52  namespaced,
53  state,
54  getters,
55  actions,
56  mutations
57}
58

vue
1<template>
2  <div>
3    <h2>QTL</h2>
4    <div class="filter">
5      <PageSearchOption
6        :active-item-key="this.queryParams.page"
7        :action="handlePageChange"
8      />
9      <FilterSearchOption
10        :active-item-key="this.queryParams.query"
11        :action="handleSelectFilterCondition"
12      />
13    </div>
14    <ul>
15      <template v-if="this.state.isLoading === false">
16        <li v-for="(item, key) in this.state.items" :key="key">
17          <a :href="item.url" target="_blank">
18            <p class="trim green" style="font-weight: bold">{{item.title}}</p>
19            <p>公開日時：{{item.created_at | formatJaTime }}</p>
20            <p>いいね：{{item.likes_count}}</p>
21            <p>タグ：<span class="tag" v-for="(tag, key) in item.tags" :key="key">{{tag.name}}</span></p>
22          </a>
23        </li>
24      </template>
25      <li v-else>
26        <p><i class="el-icon-loading"></i> Loading...</p>
27      </li>
28    </ul>
29  </div>
30</template>
31
32<script>
33import {mapGetters, mapActions} from 'vuex'
34import {isEqual} from 'lodash-es'
35import initialState from '../store/initialState/itemList'
36import moment from 'moment'
37import PageSearchOption from './PageSearchOption'
38import FilterSearchOption from './FilterSearchOption'
39export default {
40  name: 'QiitaTimeLine',
41  components: {
42    PageSearchOption,
43    FilterSearchOption
44  },
45  data () {
46    return {}
47  },
48  mounted () {
49    this.load()
50  },
51  computed: {
52    ...mapGetters({
53      state: 'item/state',
54      queryParams: 'item/queryParams'
55    }),
56    isChangedQueryParams () {
57      return !isEqual(this.queryParams, initialState.queryParams)
58    },
59    activeSortCondition () {
60      return `${this.queryParams.sortBy}_${this.queryParams.order}`
61    }
62  },
63  watch: {
64    queryParams: {
65      handler: function () {
66        this.load()
67      },
68      deep: true
69    }
70  },
71  methods: {
72    ...mapActions({
73      execGetItems: 'item/execGetItems',
74      setQueryParams: 'item/setQueryParams',
75      setItems: 'item/setItems'
76    }),
77    load () {
78      this.execGetItems(this.queryParams).then(res => {
79        this.setItems(res.data)
80      }).catch(err => {
81        console.log(err)
82      })
83    },
84    handleSelectFilterCondition (val) {
85      this.setQueryParams({query: val})
86    },
87    handlePageChange (num) {
88      this.setQueryParams({page: num})
89    }
90  },
91  filters: {
92    formatJaTime (val) {
93      return moment(val).format('YYYY/MM/DD hh:mm:ss')
94    }
95  }
96}
97</script>
98
99<!-- Add "scoped" attribute to limit CSS to this component only -->
100<style scoped>
101h1, h2 {
102  font-weight: normal;
103}
104p {
105  margin: 4px;
106}
107ul {
108  list-style-type: none;
109  padding: 0;
110}
111li {
112  display: block;
113  margin: 0 10px;
114}
115a {
116  color: #2c3e50;
117  padding: 20px;
118  margin-bottom: 10px;
119  display: inline-block;
120  width: 600px;
121  border-radius: 4px;
122  box-shadow: 0px 0px 5px;
123  text-align: left;
124  text-decoration: none;
125}
126.filter {
127  display: flex;
128  justify-content: space-between;
129  width: 640px;
130  margin: 0 auto;
131}
132.green {
133  color: rgb(66, 185, 131);
134}
135.trim {
136  overflow: hidden;
137  text-overflow: ellipsis;
138  white-space: nowrap;
139}
140.tag {
141  font-size: 12px;
142  background: rgb(66, 185, 131);
143  color: #fff;
144  padding: 2px 8px;
145  border-radius: 15px;
146  margin-left: 5px;
147}
148</style>

試したこと

アクションの
setQueryParams、execGetItems,setItems の3つのアクション全てをコメントアウトしたところ、エラーは表示されなくなったのですが、当然絞り込み等の機能は失われてしまいました。そのため。こちらでのstateの扱いが誤っているのかもしれないと思っています。

補足情報（FW/ツールのバージョンなど）

他の部分はリンク先のページのソースから変更していません。
QiitaTimeLineのGitHub

ご指導いただけますと幸いです。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

stateを使用していない関数（setQueryParams, setItems）については、引数のstateを削除すれば良いかと思います。

js
1const actions = {
2  setQueryParams ({commit}, queryParams) {
3    commit(types.SET_ITEM_LIST_SORT_DATA, {queryParams})
4  },
5  execGetItems ({commit, state}, queryParams) {
6    commit(types.SEND_ITEM_LIST_REQUEST)
7　　// qiitaAPIをコメントアウト
8    // return qiitaApi.getItems(queryParams)
9    // qiitaApiからデータ取得しているのはここ
10    // アイテムのゲット元Qiitaからlocalのitemsに置き換えたい
11    // ここで取得したいのは、itemListの中のjs。cloneDeepでディープコピーしているから
12    // このitem.js内においては、stateに同一内容が入っていると考えた
13    return state.itemList.items.getItems(queryParams)
14  },
15  setItems ({commit}, payload) {
16    commit(types.RECEIVE_ITEM_LIST_RESPONSE, payload)
17  }
18}