在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'])
}