vuex 多模块时 模块内部的mutation和action的调用方式
vue在做大型项目时,会用到多状态管理,vuex允许我们将store分割成多个模块,每个模块内都有自己的state、mutation、action、getter。模块内还可以继续嵌套相对应的子模块。
为了巩固我自己对store多模块的一些基本认识,写了个简单的多模块实例,下图为我自己创建的store的目录结构,modules文件夹内的模块,在实际项目中还可以继续分开类似store目录下的多文件结构,也就是单独的模块文件夹,方便后期修改。
store目录结构
./store/index.js的代码如下:
import vue from 'vue' import vuex from 'vuex' // import mutations from './mutations' import modulesa from './modules/modulesa' import modulesb from './modules/modulesb' vue.use(vuex) const state = { logined: false, userid: -1 } const store = new vuex.store({ state, mutations: { 'update_login_status': (state, payload) => { state.logined = true } }, modules: { modulesa: modulesa, modulesb: modulesb } }) export default store
这里为了方便和子模块进行对比,我将mutations.js的代码放到index.js里面
modulesa.js的代码如下:
const modulea = { namespaced: true, state: { isvip1: false }, mutations: { 'update_to_vip1': (state, payload) => { state.isvip1 = true } }, actions: { getvip1 ({ state, commit, rootstate }) { commit('update_to_vip1') } }, getters: {} } export default modulea
modulesb.js的代码如下:
const moduleb = { // namespaced: true, state: { isvip2: false }, mutations: { 'update_to_vip2': (state, payload) => { state.isvip2 = true } }, actions: { getvip2 ({ state, commit, rootstate }) { commit('update_to_vip2') } }, getters: {} } export default moduleb
估计看到这里,你会发现modulesa和modulesb的区别就是有无namespaced这个属性。在vuex内,模块内部的action、mutation、getter都会被注册在全局命名空间内,俗话就是注册成全局的,这样做的结果就是在调用相对应的名字的的action或者mutation或者getter的时候,所有同名的都将会被响应。让我们来看看当没有namespaced(或者值为false)的时候,在组件内是怎么调用的,代码如下:
<template> <div class="hello"> <h1>{{ msg }}</h1> <ul> <li>global state <strong>logined</strong>: {{ globalstate }}</li> <li>modulesa state <strong>isvip1</strong> {{ modulesastate }}</li> </ul> </div> </template> <script> export default { name: 'test', data () { return { msg: 'test vuex mutilple modules' } }, created () { console.log(this.$store.state) settimeout(() => { this.$store.commit('update_login_status') }, 1000) settimeout(() => { this.$store.commit('update_to_vip1') // this.$store.dispatch('getvip1') }, 2000) settimeout(() => { // this.$store.commit('cancel_vip1') this.$store.dispatch('cancelvip1') }, 3000) }, computed: { globalstate () { return this.$store.state.logined }, modulesastate () { return this.$store.state.modulesa.isvip1 } } } </script> <!-- add "scoped" attribute to limit css to this component only --> <style scoped> </style>
执行代码的截图如下:
可以看到,我在store里面commit一个update_login_status,将最顶层state中的logined的值改为true。2s的时候在store里面commit了update_to_vip1和3s的时候dispatch了一个事件cancel_vip1,将modulesa的isvip1的值从false => true => false。说明没有开启命名空间是可以直接commit或者dispatch子模块内相对应的方法名,是可以修改到自身state中的属性的。
如果namespaced的值为true时,那么就是开启了命名空间模块,调用子模块的getter、mutation、getter的时候就跟之前不一样了,vuex它内部会自动根据模块注册的路径调整命名,比如要dispatch b中的一个action的话,那么组件内的调用就应该是如下这样的:
// this.$store.dispatch('modulesb/getvip2')
this.$store.commit('modulesb/update_to_vip2')
日常项目中,在store有多个状态需要管理的时候,一般来说是应该要开启namespaced的,这样子能够使我们的代码能够有更强的封装性以及更少的耦合。
补充知识:vuex 模块化+命名空间后, 如何调用其他模块的 state, actions, mutations, getters ?
由于 vuex 使用了单一状态树,应用的所有状态都包含在一个大对象中。那么,随着应用的不断扩展,store 会变得非常臃肿。
为了解决这个问题,vuex 允许我们把 store 分 module(模块)。每一个模块包含各自的状态、mutation、action 和 getter。
那么问题来了, 模块化+命名空间之后, 数据都是相对独立的, 如果想在模块 a 调用 模块 b 的state, actions, mutations, getters, 该肿么办?
假设有这么两个模块:
模块a:
import api from '~api' const state = { vip: {}, } const actions = { async ['get']({commit, state, dispatch}, config = {}) { try { const { data: { code, data } } = await api.post('vip/getvipbaseinfo', config) if (code === 1001) commit('receive', data) } catch(error) { console.log(error) } } } const mutations = { ['receive'](state, data) { state.vip = data } } const getters = { ['get'](state) { return state.vip }, } export default { namespaced: true, state, actions, mutations, getters }
模块b:
import api from '~api' const state = { shop: {}, } const actions = { async ['get']({commit, state, dispatch}, config = {}) { try { const { data: { code, data } } = await api.post('shop/getshopbaseinfo', config) if (code === 1001) commit('receive', data) } catch(error) { console.log(error) } } } const mutations = { ['receive'](state, data) { state.shop = data } } const getters = { ['get'](state) { return state.shop }, } export default { namespaced: true, state, actions, mutations, getters }
假设模块 b 的 actions 里, 需要用模块 a 的 state 该怎么办?
const actions = { async ['shop'](store, config = {}) { const { commit, dispatch, state, rootstate } = store console.log(rootstate) // 打印根 state console.log(rootstate.vip) // 打印其他模块的 state try { const { data: { code, data } } = await api.post('shop/getshopbaseinfo', config) if (code === 1001) commit('receive', data) } catch(error) { console.log(error) } } }
我们来看下上面的代码, actions 中的 shop 方法, 有 2 个参数, 第一个是 store, 第二个是 dispatch 调用时传过来的参数
store 这个对象又包含了 4 个键, 其中 commit 是调用 mutations 用的, dispatch 是调用 actions 用的, state 是当前模块的 state, 而 rootstate 是根 state,
既然能拿到根 state, 想取其他模块的 state 是不是就很简单了...?
假设模块 b 的 actions 里, 需要调用模块 a 的 actions 该怎么办?
const actions = { async ['shop'](store, config = {}) { const { commit, dispatch, state, rootstate } = store try { const { data: { code, data } } = await api.post('shop/getshopbaseinfo', config, 'get') if (code === 1001) commit('receive', data) // 调用当前模块的 mutations dispatch('vip/get', {}, {root: true}) // 调用其他模块的 actions } catch(error) { console.log(error) } } }
上面的代码中dispatch('vip/vip', {}, {root: true})就是在模块 b 调用 模块 a 的 actions,
有 3 个参数, 第一个参数是其他模块的 actions 路径, 第二个是传给 actions 的数据, 如果不需要传数据, 也必须预留, 第三个参数是配置选项, 申明这个 acitons 不是当前模块的
假设模块 b 的 actions 里, 需要调用模块 a 的 mutations 该怎么办?
const actions = { async ['shop'](store, config = {}) { const { commit, dispatch, state, rootstate } = store try { const { data: { code, data } } = await api.post('shop/getshopbaseinfo', config) if (code === 1001) commit('receive', data) // 调用当前模块的 mutations commit('vip/receive', data, {root: true}) // 调用其他模块的 mutations } catch(error) { console.log(error) } } }
上面的代码中commit('vip/receive', {}, {root: true})就是在模块 b 调用 模块 a 的 mutations,
有 3 个参数, 第一个参数是其他模块的 mutations 路径, 第二个是传给 mutations 的数据, 如果不需要传数据, 也必须预留, 第三个参数是配置选项, 申明这个 mutations 不是当前模块的
假设模块 b 的 actions 里, 需要用模块 a 的 getters 该怎么办?
const actions = { async ['shop'](store, config = {}) { const { commit, dispatch, state, rootstate, rootgetters } = store console.log(rootgetters['vip/get']) // 打印其他模块的 getters try { const { data: { code, data } } = await api.post('shop/getshopbaseinfo', config) if (code === 1001) commit('receive', data) } catch(error) { console.log(error) } } }
我们来看下上面的代码, 相比之前的代码, store 又多了一个键: rootgetters
rootgetters 就是 vuex 中所有的 getters, 你可以用 rootgetters['xxxxx'] 来取其他模块的getters
以上这篇vuex 多模块时 模块内部的mutation和action的调用方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
上一篇: 腾讯视频如何退出doki?腾讯视频退出doki圈的方法
下一篇: java 二分法