🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Q&A

解決済

1回答

920閲覧

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

mannnakakunn

総合スコア24

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

0グッド

0クリップ

投稿2021/01/21 08:23

前提・実現したいこと

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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}

投稿2021/01/21 08:46

plasticgrammer

総合スコア629

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mannnakakunn

2021/01/22 10:31

ありがとうございます。エラーを消すことができました。 ただ、狙ったようにアクションが機能していないようです…。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問