【Vue.js】vuexのstoreにおいてアクションからミューテーションに値を渡せない

Question

前提・実現したいこと

Vueでvuexを使っており、store内のactionで楽天商品検索APIを叩き、返ってきた値をmutation経由でstateに渡したい。

API自体はうまく叩けていることを確認済み。

どなたかアドバイスを頂けますと幸いです。

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

Uncaught (in promise) ReferenceError: data is not defined

該当のソースコード

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from '../plugins/axios'
import {
  CHANGE_KEYWORD,
  SEARCH
} from './mutation-types'

Vue.use(Vuex)

const state = {
  keyword: '',
  items: []
}

const getters = {
  items: state => state.items
}

const mutations = {
  [CHANGE_KEYWORD] (state, keyword) {
    state.keyword = keyword
  },
  [SEARCH] (state, items) {
    state.items = data.Items
  }
}

function searchItem(keyword) {
  return axios.get('https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706', {
    params: {
      applicationId: "XXXXXXXXXXXXXXXXX",
      keyword: keyword,
      giftFlag: 1,
    }
  })
}

const actions = {
  [CHANGE_KEYWORD] ({ commit }, keyword) {
    commit(CHANGE_KEYWORD, keyword)
  },

  [SEARCH] ({ commit, state }) {
    searchItem(state.keyword)
      .then(data => {
        commit(SEARCH, data.Items)
      })
  }
}

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

mutaionsのこの部分でうまく渡せてない。

  [SEARCH] (state, items) {
    state.items = data.Items
  }

推測

state.itemsに代入する値の形式が間違っているのかも？と推測し色々試しましたが、正しい書き方が分からなかったので、difindのままでした。

Answer 1

  [SEARCH] (state, items) {
    state.items = items
  }

で良いのではないかと思います。