In the video of learning a lesson network imitating Meituan, nuxt will fail to install @/nuxt/axios during installation, and axios cannot be called directly in vuex, because this cannot point to vue, so I found several comparisons A good way to solve this problem, because these articles are about the same content, I just summarized a method I think is better
//Introducing the vuex entry file
import store from'./store/index.js in main.js ';
new Vue({
el: ‘#app’,
router,
store,
components: { App },
template: ‘’
})
// store/index.js
// Use vuex to repackage an action
import Vue
from'vue';
import Vuex from'vuex'; import axios from “axios”;
Vue.use(Vuex);
const store = new Vuex.Store({ state: { data: {} }, mutations: { changeData (data) { state.data = data } }, actions: { axios.get(XXX).then(res => { data = res.xxx.xxx }) commit('path',status === 200? data: [])//Judging whether the request is successful, return data if successful, return failure [] } })
export default store;
// Need to use the vue component of
vuex import {mapActions} from'vuex'
computed: { data () { return this.$store.state.data; } }, methods:mapActions([ 'abc' ]) }