CRUD adding objects from an external component in vuejs vuex

user_12037397 0
Viewed 88

i'm building this shop card and i have been focused in this front -end process using Vuejs and Vuex, I got two Json Objects : one whom gives me all available products , and other one where in i could add products as a user which buys , then: in my component of getting all products i disposed this:

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
  },

then i procede on my store to evolve this action as well as mutation to modify the state variable:

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

Until here is my modest logic , and despite of being showed the headlines inside the userDashBoard, its values are undefined enter image description here

Could you give me any advice about what im doing wrong ? Thanks in advance!!!

vuex vue.js crud javascript
1 Answers

Well , after struggling a little bit , realize that declaring as prop (object), that component where i want to add products to the user dashboard from, is possible to accesss that object in vuex, and get its values , lets say

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();
  },

then in vuex simply realize the same steps, but in the action might not be needed of accessing getters, but the object already declared and passed on dispatch action in vue method.Ain't sure if this logic is the right explanation but works

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
user_120373970
Related