Vue.js cli 插入和显示数据

Question

我正在尝试创建一个表单，用户插入数据，我应该使用 vue js 在另一个页面中显示数据

我写了这个表格

<form
              id="main-contact-form"
              class="contact-form row"
              name="contact-form"
              method="post"
            >
              <div class="form-group col-md-6">
                <input
                  v-model="this.$store.state.name"
                  type="text"
                  name="name"
                  class="form-control"
                  required="required"
                  placeholder="اسم المنتج"
                />
              </div>
              <div class="form-group col-md-6">
                <input
                  v-model="this.$store.state.price"
                  type="text"
                  name="email"
                  class="form-control"
                  required="required"
                  placeholder="السعر"
                />
              </div>
              <div class="form-group col-md-6">
                <select
                  name="subject"
                  class="form-control"
                  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 class="form-group col-md-6">
                <input
                  :value="img"
                  type="file"
                  name="image"
                  class="form-control"
                  placeholder="اختر صورة المنتج"
                />
              </div>
              <div class="form-group col-md-12">
                <textarea
                  v-model="this.$store.state.message"
                  name="message"
                  id="message"
                  required="required"
                  class="form-control"
                  rows="8"
                  placeholder="وصف المنتج أو نبذة عنه"
                ></textarea>
              </div>
              <div class="form-group col-md-12">
                <input
                  @submit.prevent="this.$store.state.add"
                  type="submit"
                  name="submit"
                  class="btn btn-primary pull-right"
                  value="اضافة"
                />
              </div>
            </form>

这是我从商店导入的数据和功能

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

当我按下按钮时，我有这个错误 （无法发布 /add-new-product ）， 我应该怎么做或者我的代码有什么问题

Answer 1

“add”函数不应位于“state”对象，而应移至“actions” 因为它调用（我可以猜到）一个 api 来保存对象

“通常，如果您想修改/改变您的状态，您可以在突变中声明的函数中执行此操作：{}，如果您进行异步操作的 api 调用，您可以在操作中声明函数：{}”

例如

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

在“添加”操作从“api”请求成功返回之后，您应该有另一个 突变中的“添加”功能将改变您的状态“亲”属性 和任何其他“状态”属性/属性 例如

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

通过添加“提交”方法（将调用“存储操作”）来重写你的 vue“表单”组件，如下所示并移动到“表单”标签

 <template>
   <form @submit.prevent="submit"
          id="main-contact-form"
          class="contact-form row"
          name="contact-form"
          method="post"
        >
          <div class="form-group col-md-6">
            <input
              v-model="this.$store.state.name"
              type="text"
              name="name"
              class="form-control"
              required="required"
              placeholder="اسم المنتج"
            />
          </div>
          <div class="form-group col-md-6">
            <input
              v-model="this.$store.state.price"
              type="text"
              name="email"
              class="form-control"
              required="required"
              placeholder="السعر"
            />
          </div>
          <div class="form-group col-md-6">
            <select
              name="subject"
              class="form-control"
              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 class="form-group col-md-6">
            <input
              :value="img"
              type="file"
              name="image"
              class="form-control"
              placeholder="اختر صورة المنتج"
            />
          </div>
          <div class="form-group col-md-12">
            <textarea
              v-model="this.$store.state.message"
              name="message"
              id="message"
              required="required"
              class="form-control"
              rows="8"
              placeholder="وصف المنتج أو نبذة عنه"
            ></textarea>
          </div>
          <div class="form-group col-md-12">
            <input
              
              type="submit"
              name="submit"
              class="btn btn-primary pull-right"
              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>

你可以在这里找到一个工作示例

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