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;