api - 使用 Vuex 和特定于组件的数据构建 Vue

Question

我看到很多 Vue.js 项目使用这种结构:

├── main.js
├── api
│   └── index.js
│   └── services           #containing files with api-calls
│       ├── global.js
│       ├── cart.js
│       └── messages.js
├── components
│   ├── Home.vue
│   ├── Cart.vue
│   ├── Messages.vue
│   └── ...
└── store
    ├── store.js
    ├── actions.js  #actions to update vuex stores
    ├── types.js
    └── modules
        ├── global.js
        ├── cart.js
        └── ...

(具有此结构的示例是“Jackblog”。)

因此，例如，Cart.vue 想要更新 Vuex 中的 inCart 数据。为此，购物车导入 actions.js:

从'../../store/actions'导入{inCart}

actions.js 导入 api 的 index.js 因此它可以连接到 api。然后更新 Vuex 存储中的值。

好的，这对我来说很清楚了。但是现在，我想处理 Messages.vue 模块。该模块也应该连接到 api 以获取所有消息，但没有必要将结果存储在 Vuex 中。唯一需要数据的组件是 Messages.vue 本身，因此它应该仅存储在组件的 data() 中。

问题:我无法在 Messages.vue 中导入 actions.js，因为该操作不应更新 Vuex。但是我无法将 actions.js 移动到 api 目录，因为这破坏了将所有向存储添加数据的文件放在存储目录中的逻辑。除此之外，逻辑应该放在 Messages.vue 中。例如，当 api 返回错误时，应设置本地 error 常量。所以它不能由一个单独的文件来处理。

进行 api 调用并将它们存储在 vuex 或本地 data() 中的推荐应用程序结构是什么？在哪里放置操作文件、api 文件等？查看 Jackblog 示例时，它仅支持 Vuex 数据。如何重组它以支持两者？

Answer 1

我正在使用 axios作为进行 API 调用的 HTTP 客户端，我在我的 src 文件夹中创建了一个 gateways 文件夹，并且每个后端都有文件，创建 axios instances , 喜欢关注

myApi.js

import axios from 'axios'
export default axios.create({
  baseURL: 'http://localhost:3000/api/v1',
  timeout: 5000,
  headers: {
    'X-Auth-Token': 'f2b6637ddf355a476918940289c0be016a4fe99e3b69c83d',
    'Content-Type': 'application/json'
  }
})

这些相同的实例在组件和 vuex 操作中都用于获取数据，以下是两种方式的详细信息。

填充组件数据

如果数据只在组件中使用，比如你的 Messages.vue，你可以有一个方法从 api 中获取数据，如下所示:

export default {
  name: 'myComponent',
  data: () => ({
    contents: '',
    product: []
  }),
  props: ['abc'],
  methods: {
    getProducts (prodId) {
       myApi.get('products?id=' + prodId).then(response => this.product = response.data)
       },
       error => {
          console.log('Inside error, fetching products failed')
          //set error variable here
       })
    }
    ..... 

填充 Vuex 数据

如果您在专用中维护产品相关数据 vuex module ,您可以从组件中的方法分派(dispatch)一个操作，该操作将在内部调用后端 API 并在商店中填充数据，代码如下所示:

组件中的代码:

methods: {
 getProducts (prodId) {
     this.$store.dispatch('FETCH_PRODUCTS', prodId)
  }
}

vuex store 中的代码:

import myApi from '../../gateways/my-api'
const state = {
  products: []
}

const actions = {
  FETCH_PRODUCTS: (state, prodId) => {
    myApi.get('products?id=' + prodId).then(response => state.commit('SET_PRODUCTS', response))
  }
} 

// mutations
const mutations = {
  SET_PRODUCTS: (state, data) => {
    state.products = Object.assign({}, response.data)
  }
}

const getters = {
}

export default {
  state,
  mutations,
  actions,
  getters
}