1.store.js
Vuex 的仓库是 store.js,将 axios 引入,并在 action 添加新的方法
// store.js
import Vue from 'Vue'
import Vuex from 'vuex'
// 引入 axios
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定义状态
state: {
test01: {
name: 'Wise Wrong'
},
test02: {
tell: '12312345678'
}
},
actions: {
// 封装一个 ajax 方法
getUserInfo(context) {
axios({
method: 'post',
url: '/user',
data: context.state.test02
})
}
}
})
export default store
注意:即使已经在 main.js 中引入了 axios,并改写了原型链,也无法在 store.js 中直接使用 $ajax 命令
2.App.vue
<template>
<div id="app">
<router-view/>
<FooterGuide v-show="$route.meta.showFooter"/>
</div>
</template>
<script>
import {mapActions} from 'vuex'
import FooterGuide from './components/FooterGuide/FooterGuide.vue'
export default {
mounted () {
// this.$store.dispatch('getAddress')
this.getAddress()
this.getUserInfo()
},
methods: {
...mapActions(['getAddress', 'getUserInfo'])
},
components: {
FooterGuide
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.app
width 100%
height 100%
background #f5f5f5
</style>