Vuex与axios的综合使用

在src的目录下，创建store文件夹，创建store.js当作仓库
在store.js内容里写

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

Vue.use(Vuex);    //必不可少

const state = {
  msg :'' //用来装数据
}

const mutations ={          // vuex中去操作数据的方法
  getdata (state) {
    console.log(state); //拿到的数据
    axios.get('../../static/data.json').then(function (res) {
      state.msg=res.data  //拿接口里的数据放到data数据里面
    })
  }
}
const store = new Vuex.Store({
  state,
  mutations
})
export default store

在src下的main.js

import store from './store/store.js'

在new的实例中注册

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

在App.vue中

  export default {
    name: 'App',
    created () {
      this.$store.commit('getdata')
    }
  }

在我们要用的组件中使用

  computed : {
      git () {
        return this.$store.state.msg
      }
    },

在模板中使用

<div v-if="git">
  {{git}}
</div>