VUEX 使用学习六 : modules
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
转载请注明出处：
当Store中存放了非常多非常大的共享数据对象时，应用会变的非常的复杂，Store对象也会非常臃肿，所以Vuex提供了一个Module模块来分隔Store。通过对Vuex中的Store分隔，分隔成一个一个的Module模块，每个Module模块都拥有自己的state、mutation、actions和getters。
const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: () => ({ ... }), mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态
对于模块中的mutations和getters，传入的第一个参数规定为state，而actions则依旧是context参数。如下：
const moduleA = { state: { count: 0 }, mutations: { increment (state) { // 这里的 `state` 对象是模块的局部状态 state.count++ } }, getters: { doubleCount (state) { return state.count * 2 } }, actions: { // context对象其实包含了 state、commit、rootState。 incrementIfOddRootsum (context) { if ((context.state.count + context.rootState.count) % 2 === 1) { // 调用mutations commit('increment') } } } }
在module中通过mapState、mapGetters、mapActions和mapMutations等辅助函数来绑定要触发的函数
第一种方式
methods: { ...mapActions([ 'some/nested/module/foo', 'some/nested/module/bar' ]) }
在vuex中，可以为导入的state、getters、actions以及mutations命名别名，，这样可以方便调用
methods: { ...mapActions([ 'foo': 'some/nested/module/foo', 'bar': 'some/nested/module/bar' ]) }
第二种方式
对于这种情况，你可以将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文。于是上面的例子可以简化为：
methods: { ...mapActions('some/nested/module', [ 'foo', // -> this.foo() 'bar' // -> this.bar() ]) }
在网上找到一个demo 示例，可参考学习： https://gitee.com/xiangbaxiang/vue-store
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |