vuex 命名空间的使用与报错问题

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的。

弊端1：不同模块中有相同命名的mutations、actions时，不同模块对同一 mutation 或 action 作出响应。
弊端2：当一个项目中store分了很多模块的时候，在使用辅助函数mapState、mapGetters、mapMutations、mapActions时，很难查询，引用的state、getters、mutations、actions来自于哪个模块，不便于后期维护。

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import cart from './modules/cart'
import products from './modules/products'
import createLogger from '../../../src/plugins/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
	modules: {
	cart,            // 这里的模块命名空间就是cart
	prod:products    // 这里的模块命名空间就是prod
}
})

store/modules/cart.js

const state = () => {
	return {
		number:0,
		name:'小明'
	}
}
const getters = {
	getNumber: state => state.number,
	getName: state => state.name
}
const mutations = {
	addNumber(state,data){
		state.number+=data;
	}
}
const actions = {}
export default {
//命名空间
namespaced: true,
state,
getters,
actions,
mutations
}

调用：

import { mapState,mapGetters,mapMutations,mapActions } from "vuex";
export default{
	computed:{
		...mapGetters('cart',["getNumber"])
	}
}

第二种：

import { createNamespacedHelpers } from 'vuex';
const { mapState,mapGetters,mapMutations,mapActions } = createNamespacedHelpers('cart');
export default{
	computed:{
		...mapGetters(["getNumber"])  // prod里面的state
	},
	methods:{
		...mapMutations(["addNumber"]),
		add(){
			this.addNumber(20);
			console.log(this.getNumber)  // 输出cart里面的number
		}
	}
}

报错问题：[vuex] unknown mutation type: cart/addNumber

找了一整天，都怀疑人生了，后来发现，引入的store路径不对
main.js下

import store from './store/index'; // 改为：'../../store/index'
// 因为我们的项目有两个store，路径不对，所以一直报错说没找到这个方法
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');