vue.js - Vuex 如何存放模块间的公用数据

问题描述

问 题

现在写了两个页面，manualTags.vue和userList.vue,两个页面都需要从后台去取dimensions数据，现在用的是vuex去管理组件的状态。两个页面对应的modules分别为manualTags.js和userList.js，代码如下：

manualTags.js

import api from '../../apis/manualTags'
import * as types from '../types'

const state = {
  dimensions: []
}

const getters = {
  dimensions: state => state.dimensions
}

const actions = {
  getDimensions({ commit }, param) {
    api.getDimensions(param).then(res => {
      commit(types.GET_DIMENSIONS, res.data);
    });
  }
}
const mutations = {
  [types.GET_DIMENSIONS](state, dimensions) {
    state.dimensions = dimensions;
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

userList.js

import api from '../../apis/userList'
import * as types from '../types'

const state = {
  dimensions: []
}

const getters = {
  c: state => state.dimensions
}

const actions = {
  getDimensions({ commit }, param) {
    api.getDimensions(param).then(res => {
      commit(types.GET_DIMENSIONS, res.data);
    });
  },
}

const mutations = {
  [types.GET_DIMENSIONS](state, dimensions) {
    state.dimensions = dimensions;
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

Q1: Vuex 会报出 'duplicate getter key: dimensions', 这个问题通过命名空间可以解决。
Q2: 两个js文件中的acions,mutions一模一样，怎样可以避免重复代码？
Q3: 这个dimensions数据存放在哪比较合适，如何合理的安排state和getters的使用？

解决方案

分模块，各模块有自己的store，模块间公共的数据放到模块共同的父组件的store中的getters里。结构类似下面这样：

cart模块:

products模块：

这篇关于vue.js - Vuex 如何存放模块间的公用数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！