如何使用 Vuex 的 Modules 属性（萌新拓展）
文章目录
- Modules是什么
- modules 里面的内容和 store 下的五个属性 state、mutations、actions、getters、modules 一样，功能也相同
-
- 他的写法有三种
-
- 1.直接在Modules里写
- 2.写在文件上部
- 3.每个模块分别写一个js文档
- Modules 里面的属性
-
-
- 1.命名空间
- 2.Modules 下的 state 属性 (同vue中的data)
- 3.Modules 下的 mutations属性 (用来修改state的方法)
- 4.Modules 下的 actions 属性 (用来执行异步操作)
- 5.Modules 下的 getters 属性 (计算属性)
- 5.Modules 下的 modules 属性
-
- 学会的 Modules 的使用方法后可以继续看看进阶方法 映射 链接在下方
Modules是什么
当需要在 Vuex 里做大量代码操作时整个文件会变得特别乱，代码会变的不是很好梳理，而 Vuex 中的 modules 属性解决了这个问题Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
modules 里面的内容和 store 下的五个属性 state、mutations、actions、getters、modules 一样，功能也相同
他的写法有三种
1.直接在Modules里写
const store= new Vuex.Store({
state: {
},
mutations: {
},
actions:{
},
getters: {
},
modules:{
mk1:{
state: {
},
mutations: {
},
actions:{
},
getters: {
},
modules：{
}
},
mk2:{
state: {
},
mutations: {
},
actions:{
},
getters: {
},
modules：{
}
}
}
})
2.写在文件上部
const mk1={
state: {
},
mutations: {
},
actions:{
},
getters: {
},
modules：{
}
}
const mk2={
state: {
},
mutations: {
},
actions:{
},
getters: {
},
modules：{
}
}
const store= new Vuex.Store({
state: {
},
mutations: {
},
actions:{
},
getters: {
},
modules:{
mk1,
mk2
}
})
3.每个模块分别写一个js文档
外部文件 1 的 js
const mk1={
state: {
},
mutations: {
},
actions:{
},
getters: {
},
modules:{
}
}
export default mk1;
外部文件 2 的 js
const mk2={
state: {
},
mutations: {
},
actions:{
},
getters: {
},
modules:{
}
}
export default mk2;
vuex 的 js 文件
// 引入两个单独的模块
import mk1 from "./mk1.js"
import mk2 from "./mk2.js"
const store= new Vuex.Store({
state: {
},
mutations: {
},
actions:{
},
getters: {
},
modules:{
mk1,
mk2
}
})
export default mk2;
Modules 里面的属性
1.命名空间
给定义好的模块里写上 namespaced: true 就会打开命名空间。
命名空间开启后会起到一个隔离的作用调用的时候需要加上要调用方法的路径才能调用。
如果没有开启命名在调用像 mutations 和 actions 这样的用 commit 和 dispatch 调用方法的时候会把同名的方法全部执行，开启后则不会全部执行，他会根据你的调用路径来判断是否执行该方法
const store= new Vuex.Store({
state: {
name:"李四"
},
mutations: {
},
actions:{
},
getters: {
},
modules:{
mk1:{
namespaced: true,
state: {
name:"张三"
},
mutations: {
},
actions: {
},
getters: {
},
modules:{
}
}
}
})
2.Modules 下的 state 属性 (同vue中的data)
const store= new Vuex.Store({
state: {
name:"李四"
},
mutations: {
},
actions:{
},
getters: {
},
modules:{
mk1:{
state: {
name:"张三"
},
mutations: {
},
actions: {
},
getters: {
},
modules:{
}
}
}
})
如何调用 modules 中mk1 下的 state 里面的 name
<template>
<div id="app">
{
{this.$store.state.mk1.name}}
div>
template>
3.Modules 下的 mutations属性 (用来修改state的方法)
const store= new Vuex.Store({
state: {
name:"李四"
},
mutations: {
xiu(){
console.log("我是最外面的xiu方法")
}
},
actions:{
},
getters: {
},
modules:{
mk1:{
namespaced: true,
state: {
name:"张三"
},
mutations: {
xiu(state){
// 第一个参数时当前模块的 state 第二个参开始是传入的参数
console.log("我是mk1下的xiu方法")
}
},
actions: {
},
getters: {
},
modules:{
}
}
}
})
如何调用 Modules 下的 mutations属性 下面是开启命名空间的语法
<template>
<div id="app">
{
{ this.$store.state.mk1.name }}
<button @click="fun">123button>
div>
template>
<script>
export default {
name: "App",
methods: {
fun(){
this.$store.commit("xiu") // 调用全局的 xiu 方法
// 开启命名空间后使用方法
this.$store.commit("mk1/xiu") // 调用mk1下的 xiu 方法
}
},
};
script>
4.Modules 下的 actions 属性 (用来执行异步操作)
const store= new Vuex.Store({
state: {
name:"李四"
},
mutations: {
},
actions:{
xiu(store){
// 第一个参数时当前模块的 store 第二个参开始是传入的参数
console.log(stroe)
}
},
getters: {
},
modules:{
mk1:{
namespaced: true,
state: {
},
mutations: {
},
actions: {
xiu(store){
// 第一个参数时当前模块的 store 第二个参开始是传入的参数
console.log(stroe)
}，
// 在局部模块中注册全局方法
haha:{
// 开启全局声名
root: true,
// 默认执行函数
handler(){
console.log("我是局部模块中的全局方法")
}
}
},
getters: {
},
modules:{
}
}
}
})
如何调用 Modules 下的 actions属性 下面是开启命名空间的语法
<template>
<div id="app">
{
{ this.$store.state.mk1.name }}
<button @click="fun">123button>
div>
template>
<script>
export default {
name: "App",
methods: {
fun(){
this.$store.dispatch("xiu") // 调用全局的 xiu 方法
// 开启命名空间后使用方法
this.$store.dispatch("mk1/xiu") // 调用mk1下的 xiu 方法
// 调用局部模块中的全局方法
this.$store.dispatch("haha")
}
},
};
script>
5.Modules 下的 getters 属性 (计算属性)
！！！在没有开启命名空间的时候 getters 下面的方法不能于外层重名 会出错
export default new Vuex.Store({
state: {
name: "123"
},
mutations: {
},
actions: {
cc(a, b, c) {
}
},
getters: {
haha(a, b, c, d) {
console.log(a) // 全局 state
console.log(b) // gettes 下的全部方法
console.log(c) // 全局 state
console.log(d) // gettes 下的全部方法
}
},
modules: {
mk1: {
namespaced: true,
state: {
name: "haha"
},
mutations: {
},
actions: {
},
getters: {
haha1(a, b, c, d) {
console.log(a) // 当前模块的 state
console.log(b) // 当前模块的 gettes
console.log(c) // 全局下的 store
console.log(d) // gettes 下的全部方法
}
},
modules: {
}
}
}
})
如何调用 Modules 下的 getters属性 下面是开启命名空间的语法
<template>
<div id="app">
{
{ this.$store.getters.haha }}
{
{ this.$store.getters['mk1/haha1'] }}
<button @click="fun">123button>
div>
template>
<script>
export default {
name: "App",
methods: {
fun(){
// this.$store.dispatch("cc")
console.log(this.$store.getters)
}
},
};
script>
5.Modules 下的 modules 属性
使用方法同上调用方法在加一层路径就好
学会的 Modules 的使用方法后可以继续看看进阶方法 映射 链接在下方
Vuex 的映射方法