I'm trying to create a form, the user insert data and i should show the data in another page just using vue js

I wrote this form

<form
              id="main-contact-form"
              
              name="contact-form"
              method="post"
            >
              <div >
                <input
                  v-model="this.$store.state.name"
                  type="text"
                  name="name"
                  
                  required="required"
                  placeholder="اسم المنتج"
                />
              </div>
              <div >
                <input
                  v-model="this.$store.state.price"
                  type="text"
                  name="email"
                  
                  required="required"
                  placeholder="السعر"
                />
              </div>
              <div >
                <select
                  name="subject"
                  
                  v-model="this.$store.state.sub"
                >
                  <option value="1">اكسسوريز</option>
                  <option value="2">عنايه</option>
                  <option value="3">مكياج</option>
                  <option value="4">شنط</option>
                  <option value="5">عطور</option>
                  <option value="6">اجهزه</option>
                  <option value="7">ملابس نساء</option>
                  <option value="8">رجال</option>
                </select>
              </div>
              <div >
                <input
                  :value="img"
                  type="file"
                  name="image"
                  
                  placeholder="اختر صورة المنتج"
                />
              </div>
              <div >
                <textarea
                  v-model="this.$store.state.message"
                  name="message"
                  id="message"
                  required="required"
                  
                  rows="8"
                  placeholder="وصف المنتج أو نبذة عنه"
                ></textarea>
              </div>
              <div >
                <input
                  @submit.prevent="this.$store.state.add"
                  type="submit"
                  name="submit"
                  
                  value="اضافة"
                />
              </div>
            </form>

this is my data and function i import them from store

export default createStore({
  state: {
    name: "",
    price: "",
    sub: "",
    img: "",
    message: "",
    date: "new Date(Date.now()).toLocaleString()",
    pro: [],
    add: function () {
      var New = {
        nName: this.name,
        nPrice: this.price,
        nSub: this.sub,
        nImg: this.img,
        nDate: this.date,
      };
      this.name = "";
      this.price = "";
      this.sub = "";
      this.pro.push(New);
      alert(5);
      // this.$router.push("/control-panel");
    },
  },
  mutations: {},
  actions: {},
  modules: {},
});

When I press the button, i have this error ( Cannot POST /add-new-product ), what should i do or what's the wrong with my code

CodePudding user response：

"add" function should not be at "state" object but moved into "actions" since it calls (as I can guess) an api to save the object

"generally if you want to modify/mutate your state, you do that in functions declared in mutations:{} and if you make api calls which are asychronous operations you declare functions in actions:{}"

e.x.

export default createStore({
  actions:{
     add:function(context,params){
        return new Promise(function(resolve){
            //call your api with ajax, assume that it returns correct
            //commit your object to "add" function of mutations
            context.commit('add',params);
        });
     }
  }
})

after "add" actions returns successfully from the "api" request then you should have another "add" function in mutations which will mutate your "pro" attribute of state and any other "state" attributes/properties e.x.

mutations:{
   add:function(state,obj){
      state.name = "";
      state.price = "";
      state.sub = "";
      state.pro.push(obj);
      alert(5);
    }
}

rewrite also your vue "Form" component by adding an "submit" method (which will call the "store action") as follows and move to the "form" tag

 <template>
   <form @submit.prevent="submit"
          id="main-contact-form"
          
          name="contact-form"
          method="post"
        >
          <div >
            <input
              v-model="this.$store.state.name"
              type="text"
              name="name"
              
              required="required"
              placeholder="اسم المنتج"
            />
          </div>
          <div >
            <input
              v-model="this.$store.state.price"
              type="text"
              name="email"
              
              required="required"
              placeholder="السعر"
            />
          </div>
          <div >
            <select
              name="subject"
              
              v-model="this.$store.state.sub"
            >
              <option value="1">اكسسوريز</option>
              <option value="2">عنايه</option>
              <option value="3">مكياج</option>
              <option value="4">شنط</option>
              <option value="5">عطور</option>
              <option value="6">اجهزه</option>
              <option value="7">ملابس نساء</option>
              <option value="8">رجال</option>
            </select>
          </div>
          <div >
            <input
              :value="img"
              type="file"
              name="image"
              
              placeholder="اختر صورة المنتج"
            />
          </div>
          <div >
            <textarea
              v-model="this.$store.state.message"
              name="message"
              id="message"
              required="required"
              
              rows="8"
              placeholder="وصف المنتج أو نبذة عنه"
            ></textarea>
          </div>
          <div >
            <input
              
              type="submit"
              name="submit"
              
              value="اضافة"
            />
          </div>
        </form>
</template>
<script> 
export default{
   methods:{
      submit:function(){
          this.$store.dispatch("add", {
    nName: this.$store.state.name,
    nPrice: this.$store.state.price,
    nSub: this.$store.state.sub,
    nImg: this.$store.state.img,
    nDate: this.$store.state.date,
  });
      }
   }
}
</script>

you can find a working example here

https://codesandbox.io/s/vuex-store-forked-d8895