将 api 数据从组件提交到 vuex

Question

我正在尝试将数据从 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>

Answer 1

通常我在一个单独的文件中创建我的 Vuex 'store' 并将其导入 main.js。

我做了一个本地实验，在 main.js 中实例化 new Vue() 之后，我在 main.js 中声明了 'const store'，正如您所做的那样，但出现错误。

尝试在 new Vue() 之前声明 'const store'。

Answer 2

您的代码完全没问题，请按如下方式创建一个新文件 store.js 并将其导入 main.js 即可。在较新版本的 vuex 中，例如 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");

在 Vue 3 和 Vuex 4 中 -> 我们可以在 main.js 中存储代码，如下所示。文档 link https://next.vuex.vuejs.org/guide/#the-simplest-store

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

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

    }
  }
})

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

将 api 数据从组件提交到 vuex

commit api data to vuex from component

vuex

vuejs2