Nuxt vuex - 从 Vue 迁移存储答案

【问题标题】：Nuxt vuex - moving store from VueNuxt vuex - 从 Vue 迁移存储
【发布时间】：2021-02-19 10:14:04
【问题描述】：

我一直在努力将我在 Vue 中完成的教程转移到 Nuxt。我已经能够让一切正常工作，但是我觉得我没有以“正确的方式”做这件事。我已经添加了 Nuxt axios 模块，但无法让它工作，所以我最终只使用了通常的 axios npm 模块。这是我的商店：

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

Vue.use(Vuex)
Vue.use(VueAxios, axios)

export const state = () => ({
  events: []
})

export const mutations = {
  setEvents: (state, events) => {
    state.events = events
  }
}

export const actions = {
  loadEvents: async context => {
    let uri = 'http://localhost:4000/events';
    const response = await axios.get(uri)
    context.commit('setEvents', response.data)
  }
}

我想知道如何使用@nuxtjs/axios 模块重写这个商店。我也不认为我需要在这里导入 vuex，但如果我不这样做，我的应用程序将无法运行。

感谢您的帮助！

【问题讨论】：

标签： axios nuxt.js vuex

【解决方案1】：

使用 @nuxtjs/axios 模块，您可以在 nuxt.config.js 中配置 axios：

// nuxt.config.js
export default {
  modules: [
    '@nuxtjs/axios',
  ],

  axios: {
    // proxy: true
  }
}

您可以通过this.$axios在您的商店（或组件）中使用它

// In store
{
  actions: {
    async getIP ({ commit }) {
      const ip = await this.$axios.$get('http://icanhazip.com')
      commit('SET_IP', ip)
    }
  }
}

【讨论】：