vue2.7 vuex 接口请求数据存储在仓库
时间: 2023-11-18 14:11:51 浏览: 205
vue如何从接口请求数据
在Vue2.7中,可以使用Vuex来进行接口请求数据的存储。首先需要安装vuex:
```
npm install vuex --save
```
然后在store文件夹下创建一个store.js文件,引入Vuex并创建一个store对象:
```
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
data: null
},
mutations: {
setData(state, payload) {
state.data = payload
}
},
actions: {
fetchData(context) {
// 发起接口请求
axios.get('/api/data')
.then(res => {
context.commit('setData', res.data)
})
.catch(err => {
console.log(err)
})
}
}
})
export default store
```
在state中定义一个data属性用来存储接口返回的数据,在mutations中定义一个setData方法用来更新state中的data属性,在actions中定义一个fetchData方法用来发起接口请求,并在请求成功后调用mutations中的setData方法来更新state中的data属性。
在Vue组件中可以通过以下方式来访问store中的data数据:
```
<template>
<div>
<div v-if="data">{{ data }}</div>
<div v-else>暂无数据</div>
<button @click="fetchData">获取数据</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState(['data'])
},
methods: {
...mapActions(['fetchData'])
},
mounted() {
this.fetchData()
}
}
</script>
```
在computed中通过mapState来获取store中的data数据,在methods中通过mapActions来调用store中的fetchData方法来发起接口请求。在组件的mounted钩子函数中调用fetchData方法来在组件渲染时就获取数据。
阅读全文