axios和vuex

axios/vuex

<template>
  // 当前组件的结构
    <div>
				// 指令系统  实现数据驱动视图
    </div>
</template>

<script>
  // 当前组件的业务逻辑
    export default {
        name:"LuffyContent",  // 当前组件注册全局组件时, 作为 Vue.component()
        data(){
          return {}
        }  
    }
</script>

<style scoped>
  // 当前组件的样式
		// 样式
</style>

常见错误

warn:propty or methods ‘xxx’ not defned

found in

​ xxx.vue

这种错误就是你没定义但是你template里面却用了 是xxx.vue这个文件

module not found

模块: npm 社区 下载的模块 npm i vue vue-router -S

import Vue from vue

自己创建的模块 找路径

axios**

​ 官网:https://www.kancloud.cn/yunye/axios/234845

将axios挂在到vue的原型上, 那么在各个组件中都能使用, 因为面向对象( 继承 )

vuex**

1.下载npm i vuex -S

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state:{
    num:1,
    questionList:[]
  },
  mutations:{
    setMutaNum(state,val){
      console.log(val)
      state.num+=val
    },
    setMutaAsync:function(state,val){
     state.num+=val
    
    },
    course_questions(state,data){
      state.questionList = data;
     
    }
  },
  actions:{
    setActionNum(context,val){
      //Action 提交的是 mutation，而不是直接变更状态。
      context.commit('setMutaNum',val)
    },
    setActionAsync:function(context,val){
      setTimeout(()=>{
        context.commit('setMutaAsync',val)
      },1)
     
     },
     course_questions(context,courseId){
       //异步  aixos 异步
       Axios.get(`course_questions/?course_id=${courseId}`)
       .then((res)=>{
        console.log(res)
        let data = res.data.data;
        context.commit('course_questions',data)
       })
       .catch((err)=>{
        console.log(err)
       })
     }
  }
})

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})