Nuxt2在混入函数里面使用asyncData请求数据 然后存放在vuex里 请列出详细的代码示例
时间: 2023-06-07 12:06:50 浏览: 201
vue中在vuex的actions中请求数据实例
5星 · 资源好评率100%
好的,以下是使用Nuxt2在混入函数中获取数据并存放在Vuex中的代码示例:
首先,在混入函数中使用asyncData方法请求数据,并在该方法中将获取的数据存放在Vuex的状态管理中。
```
import { mapMutations } from 'vuex'
export default {
asyncData({ store }) {
// 发起请求获取数据
return axios.get('/api/data').then(response => {
// 将数据存放在Vuex的状态管理中
store.commit('SET_DATA', response.data)
})
},
methods: {
...mapMutations(['SET_DATA'])
}
}
```
接下来,需要在store中定义状态管理和相关的mutations方法。
```
const state = () => ({
data: null
})
const mutations = {
SET_DATA(state, data) {
state.data = data
}
}
export default {
state,
mutations
}
```
最后,在组件中可以通过this.$store.state.data来访问Vuex中存储的数据。
```
export default {
computed: {
data() {
return this.$store.state.data
}
}
}
```
希望这个示例能够帮助你解决问题!如果你有任何其他需要帮助的地方,请继续问我吧。
阅读全文