modules模块
modules:模块
作用 ???将所有的数据进行模块的拆分 而不是放在一个store里面，拆分后有利于管理 注意在每个小模块导出的时候一定要加命名空间 namespaced=true 这样就不会出现命名冲突 如果想要调用小模块里面的方法 则需要加上小模块的名称例如handleAdd:"goodsStore/handleAdd"
子模块文件夹设置
store ???index.js(主模块) ???goodsStore（商品模块） ???????????state.vue ???????????actions.vue ???????????mutations.vue ???????????getters.vue ???????????index.vue
总模块的设置store/index.js
import Vue from "vue";import Vuex from "vuex"; //引入子仓库import goodsStore from "./goodsStore"; Vue.use(Vuex); const state = { ?}const mutations = { ??}const actions = { ?}const getters = {} const store = new Vuex.Store({ ???state, ???mutations, ???actions, ???getters, ?? modules:{ ???????goodsStore ???}}) export default store;子模块设置
goodsStore/state.js ???export default{ ???} ?goodsStore/mutations.js export default{ ???} ?goodsStore/actions.js export default{ ???} ?goodsStore/getters.js export default{ ???} goodsStore/index.js//导入import state from "./state"import mutations from "./mutations"import actions from "./actions"import getters from "./getters"export default{ ???????//独立的命名空间 ???????namespaced:true, ???????state, ???????mutations, ???????actions, ???????getters }组件中使用子模块中的state中的数据和actions中的方法
<template> ???<div class="home"> ???????<h1>{{message}}</h1> ???</div></template> <script>import Vuex from "vuex";export default { ???data(){ ???????return{ ???????} ???}, ???watch:{ ???????????}, ???computed:{ ???????...Vuex.mapState({ ???????????inputVal1:state=>state.inputVal1, ???????????inputVal2:state=>state.inputVal2, ???????????//使用子模块中的数据 ???????????message:state=>state.goodsStore.message ???????}), ???????...Vuex.mapGetters({ ???????????//不允许写函数 ???????????sum:"sum" ???????}) ????}, ???methods:{ ???????...Vuex.mapActions({ ???????????handleChange:"handleChange", ???????????//使用小模块中的方法 ???????????handeleAdd:"goodsStore/handleAdd" ???????}) ????} }</script> <style> </style>vue----webpack模板----vuex----modules子模块
原文地址：https://www.cnblogs.com/SRH151219/p/10445112.html