Vuejs2 从组件向vuex提交api数据

我试图将数据从api调用推送到我的存储中，但我不断收到错误，例如提交未定义，分派未定义。 如果我正确理解文档，我只能通过创建突变来操纵组件的状态？我已经兜了一个小时的圈子，希望能得到一些指导

在main.js中

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
import router from './router'
import 'es6-promise/auto'

Vue.config.productionTip = false

new Vue({
  router,
  render: (h) => h(App),
  store: store,
}).$mount('#app')

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    images: [],
  },
  mutations: {
    addImages(state, newImages) {
      state.images = []
      state.images.push(newImages)
    },
  },
})

Header.js组件：

<template>
  <div>
    <h1>Nasa Image Search</h1>

    <div class="search-container">
      <form action="/action_page.php">
        <input v-model="searchWord" type="text" placeholder="Search.." name="search" />
        <button v-on:click.prevent="search" type="submit">Search</button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Header',
  data: () => ({
    searchWord: "",
    //images: [],
  }),
  methods: {
    search() {
  let url
  this.searchWord
    ? url = `https://images-api.nasa.gov/search?q=${this.searchWord}&media_type=image`
    : url = `https://images-api.nasa.gov/search?q=latest&media_type=image`
  console.log(url) //bug testing

  axios
    .get(url)
    .then(response => {
      const items = response.data.collection.items
      console.log(items)

      this.$store.commit('addImages', items)
      console.log(this.$store.state.images)
    })
    .catch(error => {
      console.log(error)
    })

    }
  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

美国宇航局图像搜索
搜寻
从“axios”导入axios
导出默认值{
名称：'标题'，
数据：（）=>({
搜索词：“，
//图像：[]，
}),
方法：{
搜索（）{
让url
这是一个搜索词
？url=`https://images-api.nasa.gov/search?q=${this.searchWord}&media\u type=image`
：url=`https://images-api.nasa.gov/search?q=latest&media_type=image`
console.log（url）//bug测试
axios
.get（url）
。然后（响应=>{
常量项=response.data.collection.items
console.log（项目）
此.$store.commit（'addImages'，items）
console.log（此.store.state.images）
})
.catch（错误=>{
console.log（错误）
})
}
}
}

通常，我在单独的文件中创建Vuex“存储”，并将其导入main.js

我做了一个本地实验，在main.js中实例化了新的Vue（）之后，我在main.js中声明了“const store”，正如您所做的那样，我发现了一些错误

---

尝试在new Vue（）之前声明“const store”。

您的代码非常好，请按如下所示创建一个新文件store.js，并将其导入main.js，它将正常工作。在vuex eg 4.0的较新版本中，我们确实有createStore函数，可以使用该函数将存储代码包含在main.js文件中

store.js

 import Vue from "vue";
 import Vuex from "vuex";

 Vue.use(Vuex);

 export const store = new Vuex.Store({
 state: {   images: [], },
 mutations: {
   addImages(state, newImages) {
   state.images = []
   state.images.push(newImages)
 },
},
});

main.js

import Vue from "vue";
import App from "./App.vue";
import { store } from "./store";
import router from './router'
import 'es6-promise/auto'

Vue.config.productionTip = false;

new Vue({
 router, store,
  render: h => h(App)
}).$mount("#app");

在VUE3和Vuex 4->中，我们可以在main.js中存储代码，如下所示。文档链接

---

非常感谢你的全面回答谢谢你的回答提姆。

import { createStore } from 'vuex'
import { createApp } from 'vue'

const store = createStore({
  state () {
    return {

    }
  }
})

const app = createApp({ /* your root component */ })
app.use(store)