使用npm安装

$ npm install axios

使用 bower安装

$ bower install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

main.js:导入

import axios from 'axios'
  Vue.prototype.$http = axios
  Vue.prototype.$http.defaults.baseURL = '' // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL

 

调用接口使用axios：

1： 接口数据读取

复制代码
querygraphic () {
   let _this = this
   this.$http.get('https://localhost:44314/api/Values').then(res => {
    _this.list = res.data
   })

 data () {
  return {
   list: []
  }

调用赋值：v-for="queryg in list":key="queryg.id"  {{ queryg.version }}
复制代码

2：按id数据读取

复制代码
getgrid () {

   this.$http.get('https://localhost:44314/api/Values/' + this.id).then(res => {
    this.gettext = res.data[0]
    console.log(this.gettext)
   })

 data () {
  return {
   id: this.$route.params.id, // 读取路由传过来的id
   gettext: {}
  }
 },

调用赋值：
{{ gettext.text }}
复制代码

3：put更新

复制代码
this.$http({
        url: 'https://localhost:44314/api/Gj/' + this.id,
        method: 'put',
        contentType: 'application/json;charset=UTF-8',

        data: {
          'id': this.newinfo.id,
          'method': this.newinfo.method,
          'text': this.newinfo.text,
          'type': this.newinfo.type
        },
        dataType: 'json'
      }).then(res => {
        console.log(res)
        if (res.status === 204) {
          this.open1()
          console.log('成功')
        } else {
          this.open4()
          console.log('失败')
        }
      }).catch(console.error.bind(console)) // 异常
复制代码

 

4：delete删除

复制代码
this.$http.delete('https://localhost:44314/api/Gj/' + row.id).then(res => {
          if (res.status === 204) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getgjtype('vue') // 重新加载数据
            this.reload() // 刷新页面
            // location.reload()// 刷新页面
            // this.$router.go(0)
          } else {
            this.open4()
          }
        }).catch(console.error.bind(console)) // 异常
复制代码

 


Vuex有五个核心概念：

　　state, getters, mutations, actions, modules。

　　1. state：vuex的基本数据，用来存储变量

　　 2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

　　 3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

　　 回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

　　 4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

　　  5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

Vuex的用法：

　　新建vue项目testApp ==》 在testApp中建store文件 ==》 store文件下又有modules文件夹和getter.js 和 index.js ==》 store文件下建user.js

　　在项目的main.js中引入  import store from './store' 

　　 在store文件下的index.js中引入 

复制代码
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import global from './modules/global'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})

export default store
复制代码

　　在store文件下的getters.js中引入

复制代码
const getters = {
  self: state => state.user.self,
  token: state => state.user.token,
  currentCommunity: (state, getters) => {
    let cid = getters.currentCommunityId
    return getters.communities.filter(item => {
      return item.communityId === cid
    })
  }
}

export default getters
复制代码

　　在modules文件下的user.js写代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const user = {
        state:{
            self: null,
            token: '',
        },
        mutations:{
            SET_SELF: (state, self) => {
                 state.self = self
             },
             SET_TOKEN: (state, token) => {
                 state.token = token
             }
        },
        actions:{
             login ({ commit }, res) {
                  commit('SET_SELF', res.self)
                  commit('SET_TOKEN', res.token
            }       
}
export default user                                                                       

　　使用下面这两种方法存储数据：

　　dispatch：异步操作，写法： this.$store.dispatch('mutations方法名',值)

　　commit：同步操作，写法：this.$store.commit('mutations方法名',值)