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;