vue請求後臺數據真實接口

真實案例

後臺接口 
？ 前面是路徑 ？後面是參數  參數形式是  key=value 比如：specific_name=專題會議

路徑 url
http://192.168.40.1:9900/api-dataflow/keywork/?specific_name=專題會議

前端請求

html 模塊

  <div class="title">{{title}}</div>

js模塊

export default {
  name: 'businessStat',
  data () {
    return {
      loading: true,
      title: '',
    }
  }
   // 鉤子函數調用方法
  created () {
      //$store.state.param 讀取vuex存儲的數據
    this.dataObj = this.$store.state.params
  },
  mounted () {
    this.load()
  },
  methods: {
    load () {
      //url 是請求地址  “?specific_name=專題會議” 是請求參數
      this.axios.get(url + `?specific_name=專題會議`).then(res => {
        console.log(res)
        console.log(res.data.result)
        this.title = res.data.result[0].task_name
      })
    }
  }
}
</script>

store文件內容

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    params: {},
    code: '', // 主頁，二級頁面code
  },
  mutations: {
    params (state, data) {
      state.params = data
    },
    code (state, data) {
      state.code = data
    },
    code_page (state, data) {
      state.code_page = data
    },
  }