Vuex模块化（modules）与namespaced（命名空间）的搭配

Vuex模块化（modules）与namespaced（命名空间）的搭配

Vuex模块化（modules）格式

• 原理：可以对Vuex的actions，mutations，state，getters四个属性综合成一个部分，做成一个模块使用
• 优点：可以将一些特殊的功能独立，进行调用

// store.js文件
const a = {
    actions : {
        方法名(context, value){
            ......对value的操作
            context.commit('mutations方法名', value)
        }
    },
    mutations : {
        方法名(state, value){
            ......对state更新，并赋值给value
        }
    },
    state : {
        对象名 : 100
    },
    getters : {
        方法名(state){
            return ......
        }
    }
}

export default new Vuex.Store({
    modules : {
        // 以下两种方法都行
        // 这个地方的写法是根据components组件的方式
        aModule : a
        // 也可以直接写成以下形式，跟 a : a 一样的效果
        a
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

namespaced（命名空间）用法

• 功能：用来控制dispatch和commit的全访问能力

注意点1：模块区分

• 在模块化的基础上，对于dispatch或者是commit在调用时需要做好命名空间（namespaced）
  • 原因：在没有做模块化处理的时候，通过dispatch或者是commit调用时，是将一整个文件进行搜索，找寻与之对应的方法名。（做个小实验，如下）

// A.vue
<template>
    <div>
        <button @click="A1">A1 BUTTON</button>
    </div>
</template>

<script>
    export default {
        name : 'A',
        methods : {
            A1(){
                this.$store.dispatch('A1')
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// store.js文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const a = {
    actions : {
        A1(){
            console.log('A1 actions');
        }
    }
}

const b = {
    actions : {
        A1(){
            console.log('B1 actions');
        }
    }
}

export default new Vuex.Store({
    modules : {
        aModule : a,
        bModule : b,
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

• 以上store.js文件中，分别定义了a和b模块，在两个模块的actions中都有A1方法，执行效果如下：

• 点击A1按钮，都触发了a和b模块中的A1方法。当我们只需要执行一个模块的时候，就可以使用命名空间（namespaced），在模块中的第一行加上namespaced : true，可以防止一次性全部访问到

// store.js文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const a = {
    namespaced : true,
    actions : {
        A1(){
            console.log('A1 actions');
        }
    }
}

const b = {
    namespaced : true,
    actions : {
        A1(){
            console.log('B1 actions');
        }
    }
}

export default new Vuex.Store({
    modules : {
        aModule : a,
        bModule : b,
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

注意点2：使用namespace模块区分后，在xxx.vue调用模块方法上要做出的改变

• state：
  • 没有namespace：{{$store.state.对象名}}
  • 用了namespace：{{$store.state.模块名.对象名}}
• actions：
  • 没有namespace：this.$store.dispatch(‘actions方法名’, 值)
  • 用了namespace：this.$store.dispatch(‘模块名/actions方法名’, 值)
• mutations：
  • 没有namespace：this.$store.commit(‘mutations方法名’, 值)
  • 用了namespace：this.$store.commit(‘模块名/mutations方法名’, 值)
• getters：
  • 没有namespace：{{$store.getters.getters方法名}}
  • 用了namespace：{{$store.getters[‘模块名/getters方法名’]}}

// xxx.vue
<template>
    <div>
        <h3>state:{{$store.state.aModule.对象名}}</h3>
        <h3>getters:{{$store.getters['aModule/getters方法名']}}</h3>
    </div>
</template>

<script>
    export default {
        name : 'xxx',
        methods : {
            方法名(){
                this.$store.dispatch('aModule/actions方法名', 值)
            },
            方法名(){
                this.$store.commit('aModule/mutations方法名', 值)
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// store.js文件
const a = {
    namespaced : true,
    actions : {
        方法名(context, value){
            ......对value的操作
            context.commit('mutations方法名', value)
        }
    },
    mutations : {
        方法名(state, value){
            ......对state更新，并赋值给value
        }
    },
    state : {
        对象名 : 100
    },
    getters : {
        方法名(state){
            return ......
        }
    }
}

const b = {跟上面一样}

export default new Vuex.Store({
    modules : {
        // 以下两种方法都行
        // 这个地方的写法是根据components组件的方式
        aModule : a
        // 也可以直接写成以下形式，跟 a : a 一样的效果
        a
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

导入导出式模板（简洁）

• 将定义好的模块，封装在一个js文件中

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 改成导入
import aModule from './a'

export default new Vuex.Store({
    modules : {
        aModule
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

// a.js导出
export default {
    namespaced : true,
    actions : {
        ......
    },
    mutations : {
        ......
    },
    state : {
        ......
    },
    getters : {
        ......
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16