Vuex 模块化和辅助函数的使用

在vue项目中，不同的模块共用一个vuex，会导致代码混乱，没有层次，因此需要需要将vuex保存的数据按照模块来进行划分，分开管理。

vuex主文件入口：

// vuex主入口

import Vue from 'vue'
import Vuex from 'vuex'
import Home form 'src/models/home'
import Person form 'src/models/person'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    Home,
    Person
  },
  mutations: {},
  getters: {},
  actions: {},
  state: {}
})

export default store

 vuex分模块文件入口：

// Home模块

import Vue from 'vue'
import * as types from './mutationTypes'
import * as getters from './getters'
import * as actions from './actions'

const state = {
    homeCaseList: []
}

// 此处未将mutation抽离，有兴趣的可以试一下
const mutations = {
    // 抽离函数名称
    [types.HOME_LINK_TABLE](state, payload) {
        state.homeCaseList = payload
    }
}

export default {
    namespaced: true,
    actions,
    state,
    getters,
    mutations
}



// getters 文件

export const HomeTable = state => state.homeCaseList

// actions 文件    --> 此处可以进行异步操作，比如发送请求

import * as types from './mutationTypes'

export const homeCaseList = ({ dispatch, commit }, data) => {
    // 同步调用mutations中的方法
    commit(types.HOME_LINK_TABLE, data)
    // 异步调用action的方法
    dispatch('homeCaseData')
}

// mutationTypes 文件

export const HOME_LINK_TABLE= 'HOME_LINK_TABLE'

vuex辅助函数使用：

import { mapGetters, mapActions } from 'vuex'

// 计算属性中使用mapGetters辅助函数
computed: {
    ...mapGetters('Home', ['HomeTable']),
}

// methods中使用mapActions辅助函数
methods: {
    ...mapActions('Home', ['homeCaseList'])
}