CRUD가 vuejs vuex의 외부 구성 요소에서 개체를 추가함

CRUD가 vuejs vuex의 외부 구성 요소에서 개체를 추가함

저는 이 숍카드를 만들고 있으며 Vuejs와 Vuex를 사용한 프런트 엔드 프로세스에 주력하고 있습니다.하나는 이용 가능한 모든 제품을 제공하는 2개의 Json Objects를 받았고, 다른 하나는 제품을 구입하는 사용자로서 제품을 추가할 수 있는 경우입니다.그 후, 모든 제품을 취득하는 컴포넌트에 이 제품을 폐기할 수 있습니다.

HTML
some code.....
 @click="addPurch(link)"

SCRiPT

methods: {
    ...mapActions(["fetchAllProducts", "addPurchase", "fetchUserIdProducts"]),

    addPurch(link) {
      this.$store.dispatch("addPurchase", link);
    }
  },
  created() {
    this.fetchAllProducts();--------------------fetching all products on sale
    this.fetchUserIdProducts();------------------fetching products user already has in dashboard
  },

그런 다음 이 액션과 상태 변수를 수정하기 위한 변환 작업을 내 스토어에서 수행합니다.

ACTION
addPurchase({commit,getters},link){

      let link={
        product_imgs: getters.getAllProducts.products.product_image,
        product_id: getters.getAllProducts.products.product_id,
        product_price:getters.getAllProducts.products.product_price,
        product_name:getters.getAllProducts.products.product_name,
      }
      commit('settingAddPurch', link)

    }----creating a object to commit it to the mutation to change the state, for that i just access the 
         getter that expose all products availabe to sale

MUTATION
     settingAddPurch(state, link){
      console.log(state.userBoard);
      state.userBoard.details_of_purchase.push(link)
    }--------------simply passing the object already obtained from the action to the state variable  

여기까지는 저의 겸손한 논리가 있고, 사용자 DashBoard에 헤드라인이 표시되더라도 그 값은 정의되어 있지 않습니다.

제가 무엇을 잘못하고 있는지 조언을 해주시겠어요?잘부탁드립니다!!

조금 고생한 후 사용자 대시보드에 제품을 추가하는 컴포넌트인 프로포넌트(개체)로 선언하면 vuex에서 해당 개체에 액세스하여 값을 얻을 수 있다는 것을 알게 됩니다.

HTML
some code.....
 @click="addPurch(link)"

SCRiPT
  props: {
    ProductsCard: Object,
  },
  methods: {
    ...mapActions(["fetchAllProducts", "addPurchase", "fetchUserIdProducts"]),
    addPurch(link) {
      this.$store.dispatch("addPurchase", this.ProductCard);
    }

  },
  created() {
    this.fetchAllProducts();
    this.fetchUserIdProducts();
  },

그 후 vuex에서는 동일한 단계를 인식하지만 작업에서는 getter에 액세스할 필요가 없을 수 있지만 vue 메서드에서 개체가 이미 디스패치 작업을 선언하고 전달했습니다.이 논리가 맞는 설명인지는 모르겠지만, 효과가 있다.

ACTION
addPurchase({commit},link){

      let linkProduct={
        product_imgs: link.product_image,
        product_id: link.product_id,
        product_price:link.product_price,
        product_name:link.product_name,
      }
      commit('settingAddPurch', linkProduct)

    }----creating a object to commit it to the mutation to change the state, for that i just access the 
         getter that expose all products availabe to sale

MUTATION
     settingAddPurch(state, link){
      console.log(state.userBoard);
      state.userBoard.details_of_purchase.push(link)
    }--------------simply

언급URL : https://stackoverflow.com/questions/60620299/crud-adding-objects-from-an-external-component-in-vuejs-vuex