CRUD добавление объектов из внешнего компонента в vuejs vuex - PullRequest
Новая
       4

CRUD добавление объектов из внешнего компонента в vuejs vuex

2 голосов
/ 10 марта 2020

Я строю эту карту магазина, и я был сосредоточен на этом фронт-энд-процессе, используя Vuejs и Vuex, я получил два Json Объекта: один, который дает мне все доступные продукты, и другой, где я мог добавить продукты как пользователь, который покупает, затем: в моем компоненте получения всех продуктов я распорядился так: 

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

Пока здесь не появится мой скромный лог c, и, несмотря на то, что его отображают заголовки внутри userDashBoard, его значения не определены enter image description here

Не могли бы вы дать мне совет о том, что я делаю неправильно? Заранее спасибо !!!

1 Ответ

0 голосов
/ 11 марта 2020

Ну, немного потрудившись, поймите, что объявление в качестве объекта (объекта), из которого я хочу добавить продукты в панель пользователя, позволяет получить доступ к этому объекту в 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 просто реализуйте те же шаги, но в действии может не потребоваться доступ к геттерам, но объект уже объявлен и передан действию диспетчеризации в vue методе. Не уверен если эта логика c правильное объяснение, но работает 

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