vuex 全局store,前后端交互

1.監聽input輸入框 titleHandler

   <div>
        <!-- 監聽input輸入框 titleHandler-->
       <input type="text" class="input" v-model="titleHandler"> <button class="btn btn-success" @click="addOneNote">提交</button>
              
  </div>

 

 2.定義計算屬性

 computed: { // 使用計算屬性，如果賦值 我就賦值給 $store.state.note.title 
    // 如果我要打印這個屬性的時候，將執行我的 get方法 渠道title值
 titleHandler:{  set:function(newValue){ this.$store.state.note.title = newValue }, get:function(){ return this.$store.state.note.title }
}

 3.執行提交事件之后

  // 方法
 methods:{ addOneNote(){ var json = { // 取到屬性並賦值給title
          title:this.titleHandler, markdown:this.markdownHandler, counttet:this.$refs.t.innerText, }

 

 4.向后端發請求

   // 向后端提交數據
 $.ajax({ url:'api/api/comments/', //請求的類型（注意）
          contentType: 'application/json;charset=utf-8', type:'post', data:JSON.stringify(json), success:function(data){ console.log(data) }, error:function(err){ console.log(err) }

 

 

 

 注意點：

 // $.ajax 下面是取不到this.$store.state.allList 所以我們要自己賦值一個全局組件this讓它去改變store中的值
        var _this = this;