方式一：直接在main.js里面注册vuex的仓库实例
// main.js
import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'// 让vue实例使用Vuex
Vue.use(Vuex)Vue.config.productionTip = false// 实例化Vuex的仓库，store代表仓库
const store = new Vuex.Store({// state存放所有的公用数据
    state: {name : "bdyjy",}
});new Vue({el: '#app',// 注册store: store
  store,components: { App },template: '<App/>'
});

方式二：为了方便维护，通常在src下面新建一个store文件夹，然后在里面新建一个index.js
// store/index.js
import Vuex from "vuex"
import Vue from "vue"Vue.use(Vuex);// 抛出实例化的Vuex仓库，store代表仓库
export default new Vuex.Store({// state存放所有的公用数据
  state: {name : "bdyjy",}
})// main.js
import Vue from 'vue'
import App from './App'
import store from "./store/index"Vue.config.productionTip = falsenew Vue({el: '#app',// 注册store: store
  store,components: { App },template: '<App/>'
});

1. // store/index.js
import Vuex from "vuex"
import Vue from "vue"Vue.use(Vuex);// 抛出实例化的Vuex仓库，store代表仓库
export default new Vuex.Store({// state存放所有的公用数据
  state: {name : "bdyjy",},// getters对state的值进行二次处理
  getters: {friend: function (state) {// 接收state作为参数return state.name + '的朋友是:jty'}}
})2. // 在某个组件中使用
// course.vue
<template><div><h2>这是课程组件</h2><p>我是{{name}}</p><p>{{friend}}</p></div>
</template><script>export default {name: "Course",computed: {name: function () {// 通过state取值return this.$store.state.name},friend: function () {// 通过getters取值return this.$store.getters.friend}}}
</script>

1. // store/index.js
import Vuex from "vuex"
import Vue from "vue"Vue.use(Vuex);// 抛出实例化的Vuex仓库，store代表仓库
export default new Vuex.Store({// state存放所有的公用数据
  state: {name : "bdyjy",},// getters对state的值进行二次处理
  getters: {friend: function (state) {// 接收state作为参数return state.name + '的朋友是:jty'},play: function (state, getters) {// 接收state和getters作为参数// 因为要取到friend，就要statereturn getters.friend + '一起玩'}}
})2. // 在某个组件中使用
// course.vue
<template><div><h2>这是课程组件</h2><p>我是{{name}}</p><p>{{friend}}</p><p>{{play}}</p></div>
</template><script>export default {name: "Course",computed: {name: function () {// 通过state取值return this.$store.state.name},friend: function () {// 通过getters取值return this.$store.getters.friend},play: function () {return this.$store.getters.play}}}
</script>

<template><div><h2>这是学位课程信息</h2><button @click="my_click">点击展示学位信息</button><h3>{{degree_info}}</h3></div>
</template><script>export default {name: "DegreeCourse",computed: {degree_info: function () {return this.$store.state.degree_info}},methods: {// 提交事件到store
      my_click: function () {this.$store.commit('degree_info', '博士')}}}
</script>

import Vuex from "vuex"
import Vue from "vue"Vue.use(Vuex);// 抛出实例化的Vuex仓库，store代表仓库
export default new Vuex.Store({state: {degree_info: ''},// commit上来的事件在这里进行处理
  mutations: {degree_info: function (state, data) {state.degree_info = data}}
})

// 携带参数的get请求
axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

// 上面的请求可以这样做
axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

axios.post('/user', {username: 'xiaoming',password: '123abcd'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

function getUserAccount() {return axios.get('/user/12345');
}function getUserPermissions() {return axios.get('/user/12345/permissions');
}axios.all([getUserAccount(), getUserPermissions()]).then().catch();

axios.request({method: 'post',  // 请求方式:get、post、delete等等url: '/user/12345',data: {username: 'xiaoming',password: '123abcd'}
});

<script>export default {name: "DegreeCourse",mounted(){this.$axios.request({url: "http://127.0.0.1:8000/test/",  // 后端地址method: "get"  // 提交方式}).then(function (response) {// then是成功后的回调函数
        console.log(response);}).catch(function (error) {// catch是失败后的回调函数
        console.log(error);})}}
</script>

// 某前端页面代码
<script>// 定义一个函数function handlerResponse(data) {console.log(data)}
</script>// 向后端发送请求，拿到handlerResponse函数并执行
<script src="http://127.0.0.1:8000/test/"></script>

// 某Django后端代码
class TestView(views.View):def get(self, request):# 返回一个handlerResponse("ok")字符串return HttpResponse('handlerResponse("ok")')

class TestView(views.View):def get(self, request):return HttpResponse('嘿嘿')

from django.utils.deprecation import MiddlewareMixinclass MyCores(MiddlewareMixin):def process_response(self, request, response):# 给这个响应添加响应头# 告诉浏览器我这个后端允许响应头指定的域拿到我的响应数据(*代表所有域)response['Access-Control-Allow-Origin'] = '*'# http://localhost:8080代表只能让这个域拿到我的数据# response['Access-Control-Allow-Origin'] = 'http://localhost:8080'return response

<script>export default {name: "DegreeCourse",mounted(){this.$axios.request({url: "http://127.0.0.1:8000/test/",  // 后端地址method: "get"  // get简单请求// method: "post"  // post简单请求}).then(function (response) {// then是成功后的回调函数console.log(response); // 接收到后端response的数据是一个对象}).catch(function (error) {// catch是失败后的回调函数
        console.log(error);})}}
</script>

class TestView(views.View):def delete(self, request):return HttpResponse("返回DELETE数据")

class MyCores(MiddlewareMixin):def process_response(self, request, response):# 给这个响应添加响应头# 告诉浏览器我这个后端允许响应头指定的域拿到我的响应数据(*代表所有域)response['Access-Control-Allow-Origin'] = '*'# http://localhost:8080代表只能让这个域拿到我的数据# response['Access-Control-Allow-Origin'] = 'http://localhost:8080'# 如果是复杂请求，会先发送OPTIONS预检if request.method == 'OPTIONS':# 如果是复杂请求的方法不被允许，那么就给告诉浏览器我允许这个复杂请求response["Access-Control-Allow-Methods"] = "DELETE"return response

<script>export default {name: "DegreeCourse",mounted(){this.$axios.request({url: "http://127.0.0.1:8000/test/",  // 后端地址method: 'delete' // delete复杂请求}).then(function (response) {// then是成功后的回调函数console.log(response); // 接收到后端response的数据是一个对象}).catch(function (error) {// catch是失败后的回调函数
        console.log(error);});}}
</script>

class TestView(views.View):def post(self, request):return HttpResponse("返回POST数据")

class MyCores(MiddlewareMixin):def process_response(self, request, response):# 给这个响应添加响应头# 告诉浏览器我这个后端允许响应头指定的域拿到我的响应数据(*代表所有域)response['Access-Control-Allow-Origin'] = '*'# http://localhost:8080代表只能让这个域拿到我的数据# response['Access-Control-Allow-Origin'] = 'http://localhost:8080'# 如果是复杂请求，会先发送OPTIONS预检if request.method == 'OPTIONS':# 如果是复杂请求的方法不被允许，那么就给告诉浏览器我允许这个复杂请求response["Access-Control-Allow-Methods"] = "DELETE"# 告诉浏览器这个请求头的数据类型我是允许的response["Access-Control-Allow-Headers"] = "Content-Type"return response

<script>export default {name: "DegreeCourse",mounted(){this.$axios.request({url: "http://127.0.0.1:8000/test/",  // 后端地址method: 'post', // post发送复杂请求contentType: "application/json",data: {"author": "狗屎"}}).then(function (response) {// then是成功后的回调函数console.log(response); // 接收到后端response的数据是一个对象}).catch(function (error) {// catch是失败后的回调函数
        console.log(error);})}}
</script>