Vuex、axios以及跨域请求处理

一、Vuex

1、介绍

vuex是一个专门为Vue.js设计的集中式状态管理架构。
对于状态，我们把它理解为在data中需要共享给其他组件使用的部分数据。
Vuex和单纯的全局对象有以下不同：

    1. Vuex 的状态存储是响应式的。当vue组件从store中读取状态的时候，
    若store中的状态发生变化，那么相应的组件也会相应的得到高效更新。


    2. 你不能直接改变store中的状态。改变store中的状态的唯一途径就是显示的
    提交(commit)mutation。这样使得我们可以方便的跟踪每一个状态的变化，
    从而让我们能够实现一些工具来帮助我们更好的了解我们的应用。

2、vuex的安装和实例化

1. 安装命令

--  npm install vuex

2. 实例化的两种方式

方式一：直接在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 = false

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