正文
Vuex基础-Module
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
官方API地址：https://vuex.vuejs.org/zh/guide/modules.html
前面几节课写的user.js就称为一个module，这样做的原因是：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。每个模块又是独立的store，拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
下面以在根store对象动态注册模块为例来对module做演示：
store.vue代码：
<template>
<div>
<a-input :value="inputValue" @input="handlerInput"></a-input>
<p>{{ inputValue }} -> lastLetter is {{ inputValueLastLetter }}</p>
<p>appName: {{ appName }}, appNameWithVersion : {{ appNameWithVersion }}</p>
<p>userName : {{ userName }}, firstLetter is : {{ firstLetter }}</p>
<button @click="handleChangeAppName">修改appName和user.js中的userName</button>
<p>动态给state增加appVersion: {{ appVersion }}</p>
<button @click="handleActionChangeAppName">通过Action修改appName</button>
<button @click="registerModule">动态注册模块</button>
<p v-for="(li, index) in todoList" :key="index">{{ li }}</p>
</div>
</template>
<script>
import AInput from "_c/AInput.vue";
import AShow from "_c/AShow.vue";
//变量的解构赋值
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import { stat } from "fs";
export default {
name: "store",
data() {
return {
inputValue: ""
};
},
components: {
AInput: AInput,
AShow: AShow
},
computed: {
//ES6展开操作符 mapState展开会形成一个对象 使用对象展开运算符将此对象混入到外部对象中
...mapState({
appName: state => state.appName,
appVersion: state => state.appVersion,
userName: state => state.user.userName,
todoList: state => (state.todo ? state.todo.todoList : [])
}),
// 使用对象展开运算符将 getter 混入 computed 对象中
// ...mapGetters(["appNameWithVersion"]),
appNameWithVersion() {
//通过属性访问getters,Getter 会暴露为 store.getters 对象，可以以属性的形式访问这些值：
return this.$store.getters.appNameWithVersion;
},
...mapGetters(["firstLetter"]),
inputValueLastLetter() {
return this.inputValue.substr(-1, 1);
}
},
methods: {
handlerInput(val) {
this.inputValue = val;
},
//
...mapMutations([
"SET_USER_NAME", //将 `this.SET_USER_NAME()` 映射为 `this.$store.commit('SET_USER_NAME')`
"SET_APP_NAME" //将 `this.SET_APP_NAME()` 映射为 `this.$store.commit('SET_APP_NAME')`
]),
...mapActions([
"updateAppName" //将 `this.updateAppName()` 映射为 `this.$store.dispatch('updateAppName')`
]),
handleChangeAppName() {
this.SET_APP_NAME({
appName: "newAppName"
});
this.SET_USER_NAME({
userName: "shuyujie"
});
this.$store.commit("SET_APP_VERSION");
},
handleActionChangeAppName() {
//第一种调用Action的方法
//this.$store.dispatch('updateAppName')
//第二种调用Action的方法
this.updateAppName();
},
registerModule() {
this.$store.registerModule( "todo", {
state: {
todoList: ["学习mutations", "学习actions"]
}
});
}
}
};
</script>
效果图：
若给user动态一个模块，则store.vue组件代码：
<template>
<div>
<a-input :value="inputValue" @input="handlerInput"></a-input>
<p>{{ inputValue }} -> lastLetter is {{ inputValueLastLetter }}</p>
<p>appName: {{ appName }}, appNameWithVersion : {{ appNameWithVersion }}</p>
<p>userName : {{ userName }}, firstLetter is : {{ firstLetter }}</p>
<button @click="handleChangeAppName">修改appName和user.js中的userName</button>
<p>动态给state增加appVersion: {{ appVersion }}</p>
<button @click="handleActionChangeAppName">通过Action修改appName</button>
<button @click="registerModule">动态注册模块</button>
<p v-for="(li, index) in todoList" :key="index">{{ li }}</p>
</div>
</template>
<script>
import AInput from "_c/AInput.vue";
import AShow from "_c/AShow.vue";
//变量的解构赋值
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import { stat } from "fs";
export default {
name: "store",
data() {
return {
inputValue: ""
};
},
components: {
AInput: AInput,
AShow: AShow
},
computed: {
//ES6展开操作符 mapState展开会形成一个对象 使用对象展开运算符将此对象混入到外部对象中
...mapState({
appName: state => state.appName,
appVersion: state => state.appVersion,
userName: state => state.user.userName,
todoList: state => (state.user.todo ? state.user.todo.todoList : [])
}),
// 使用对象展开运算符将 getter 混入 computed 对象中
// ...mapGetters(["appNameWithVersion"]),
appNameWithVersion() {
//通过属性访问getters,Getter 会暴露为 store.getters 对象，可以以属性的形式访问这些值：
return this.$store.getters.appNameWithVersion;
},
...mapGetters(["firstLetter"]),
inputValueLastLetter() {
return this.inputValue.substr(-1, 1);
}
},
methods: {
handlerInput(val) {
this.inputValue = val;
},
//
...mapMutations([
"SET_USER_NAME", //将 `this.SET_USER_NAME()` 映射为 `this.$store.commit('SET_USER_NAME')`
"SET_APP_NAME" //将 `this.SET_APP_NAME()` 映射为 `this.$store.commit('SET_APP_NAME')`
]),
...mapActions([
"updateAppName" //将 `this.updateAppName()` 映射为 `this.$store.dispatch('updateAppName')`
]),
handleChangeAppName() {
this.SET_APP_NAME({
appName: "newAppName"
});
this.SET_USER_NAME({
userName: "shuyujie"
});
this.$store.commit("SET_APP_VERSION");
},
handleActionChangeAppName() {
//第一种调用Action的方法
//this.$store.dispatch('updateAppName')
//第二种调用Action的方法
this.updateAppName();
},
registerModule() {
this.$store.registerModule(["user", "todo"], {
state: {
todoList: ["学习mutations", "学习actions"]
}
});
}
}
};
</script>
效果图：
此外需要注意的是，若模块使用了命名空间（namespaced:true），则访问模块中定义的模块时候需要采用这种方式：
...mapMutations("user/xxx",[
"SET_USER_NAME", //将 `this.SET_USER_NAME()` 映射为 `this.$store.commit('SET_USER_NAME')`
"SET_APP_NAME" //将 `this.SET_APP_NAME()` 映射为 `this.$store.commit('SET_APP_NAME')`
])
