记录一下关于vuex的学习之初,根模块与子模块的定义方式。搜了很多资料,但是似懂非懂,大多按照官方文档讲解,不太好直接照搬实操。于是这里记录一下操作,如有说的不对的,请各位大佬们指教!
ps:如果朋友对根模块与子模块的定义不理解,可以搜以下vuex模块化管理的定义。这里直接说要怎么做。
1. 根模块:
在vue项目的src文件夹中新建store文件夹src\store
,然后新建index.js
文件作为根模块。模板代码:
import Vue from 'vue'
import Vuex from 'vuex'
//import vote from './modules/Vote' //这里写的是引入的子模块,后面讲
Vue.use(Vuex)
export default new Vuex.Store({ //注意!!只有根模块写new Vuex.Store,后面的子模块
state: {
//这里放的是根属性,也就是可以使用this.$store.state.属性名访问的
},
mutations: {
//这里放的是根“操作”,也就是可以使用this.$store.commit('mutation名')
},
modules: {
namespaced: true, //这里是命名空间设置,后面讲
//这里放的是子模块名,后面讲(emm,挖好多坑)
}
//还有actions和getters,但是我没搞懂,不说了(下次一定)
})
总结:
- 有两个import和vue.use
- 使用export default的时候需要写new(对比:子模块千万别写!)
2.子模块
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default{
namespaced: true, //这个选择使用,使用了的效果是在组件中用commit的时候type参数加上模块名,
//如this.$store.commit('模块名/mutation名')
state: {
//这里放的是子模块的属性,使用的时候这样用:this.$store.state.模块名.属性名
},
mutations: {
//这里放子模块的“操作”,使用的时候根据namespaced是否定义为true,
//定义了则commit的时候参数要加模块名(如this.$store.commit('模块名/mutation名')),
//没有定义则直接用mutation名,那么就有一个新的问题,就是可能重名,我建议加上
},
actions: {
//emm。。下次一定
}
}
总结:
- 子模块的定义跟根模块是类似的,再次提醒export default不要加new。
- 联动:将子模块引入根模块的步骤有两个(都是根模块中操作):
- 使用import引入js文件
- 在根模块中
modules:{ 子模块名1 }
写上子模块名 - 注意
import 名字1 from '路径'
中,名字1与子模块名1是对应的,可以跟子模块的js名一样,也可以不一样。路径的写法就跟其他的组件引入写法一样。
3.错误解决
关于unknown mutation 这个错误,有很多的原因(别问我是怎么知道的,一个一个方法试的…凸(艹皿艹 )),比如可能是因为定义了namespaced但是调用没有使用模块名,所以具体原因具体分析(路漫漫其修远兮,调bug其难兮,噫吁嚱,危乎难哉[串台了])。这里提供一种思路:看一下子模块定义是不是用了new!!不要用啊不要用。
ok,fine。找了两天的bug。