구성 요소에서 vuex에 API 데이터 커밋

구성 요소에서 vuex에 API 데이터 커밋

API 호출에서 데이터를 스토어로 푸시하려고 하는데 commit이 정의되지 않고 dispatch가 정의되지 않은 등의 오류가 계속 발생합니다.문서를 올바르게 이해하면 돌연변이를 만들어 컴포넌트의 상태를 조작할 수 있습니다.지금 한 시간 동안 빙글빙글 돌고 있으니 안내 좀 해주시면 감사하겠습니다.

main.discloss.로 되어 있습니다.

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>

코드는 문제없습니다.다음과 같이 새로운 파일스토어.js를 생성하여 main.js로 Import하면 동작합니다.vuex 4.0과 같은 새로운 버전에서는 createStore 기능을 사용하여 main.js 파일 자체에 스토어 코드를 포함할 수 있습니다.

store.displaces를 설정합니다.

 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.discloss.main.discloss.

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에 스토어 코드를 설정할 수 있습니다.doc link https://next.vuex.vuejs.org/guide/ #the-module-store

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

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

    }
  }
})

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

보통 Vuex '스토어'를 다른 파일에 생성하여 main.js로 Import합니다.

main.js에서 새로운 Vue()를 인스턴스화한 후 main.js에서 'constore'를 선언한 로컬 실험을 했는데 오류가 발생하였습니다.

새 Vue() 전에 '계속 저장'을 선언해 보십시오.

언급URL : https://stackoverflow.com/questions/66091639/commit-api-data-to-vuex-from-component