使用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想要更新inCartVuex中的数据.为此,购物车进口actions.js:

import { inCart } from '../../store/actions'

在actions.js进口的API index.js,因此它可以连接到API.然后它更新Vuex商店中的值.

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

问题:我无法导入actions.js内部,Messages.vue因为操作不应更新Vuex.但我无法移动actions.js到api目录,因为这打破了将所有添加数据的文件放入store-directory中的存储的逻辑.除此之外,逻辑应该放在里面Messages.vue.例如,当api返回错误时,error应设置local -constant.所以它不能由单独的文件处理.

建立api调用并将其存储在vuex或local中的推荐应用程序结构是什么data()？放置动作文件,api文件等的位置？在查看Jackblog示例时,它仅支持Vuex数据.如何重组这个以支持两者？

Answer 1

我使用axios作为HTTP客户端进行API调用,我gateways在我的src文件夹中创建了一个文件夹,每个后端都有文件,创建axios实例,如下

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模块中维护与产品相关的数据,则可以从组件中的方法调度操作,该方法将在内部调用后端API并在存储中填充数据,代码如下所示:

组件代码:

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

vuex商店中的代码:

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
}