vuex-6-module
2021-07-19 本文已影响0人
云高风轻
1. 前言
1.拆分无止境,只是需要适合自己的项目
2.接下来分析下module的用法
2. module
store问题
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，
store对象就有可能变得相当臃肿。
解决
为了解决以上问题，
Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
3. 单独的 user模块
尤其要注意的是 这个
namespaced:true,
设置命名空间,
因为之前的拆分,你并不能保证没有重名的,这个命名空间就可以保证不重名,原理就是访问变量的时候加了一层,后续会看到
export default{
// 设置独立的命名空间,避免命名冲突
namespaced:true,
state:{
userInfo:{}
},
mutations:{
userInfoMutation(state,obj){
state.userInfo = obj
}
},
actions:{
userInfoActions({commit},obj){
commit("userInfoMutation",obj)
}
}
}
4. store
这2种拆分可以共存,这里都放这做个演示
import Vuex from 'vuex'
import state from "./state"
import mutations from "./mutations"
import actions from "./actions"
import getters from "./getters"
import user from "./user"
Vue.use(Vuex)
export default new Vuex.Store({
state,
getters,
mutations,
actions,
modules: {
//user:user
user
}
})
5. 基础访问
访问的时候 比之前多了一层
user,所以不会重名
注意
1.这
user和store里面的modules里面的保持一致
computed: {
userInfo() {
// 缺点就是访问的时候 比较麻烦
return this.$store.state.user.userInfo;
},
},
6.基础修改
使用的时候 比之前多了一层
user,所以不会重名
注意
1.这
user和store里面的modules里面的保持一致
2.一定要在模块里面开启命名空间namespaced:true,
test() {
this.$store.commit("user/userInfoMutation", {
test: "测试",
name: "module写法",
});
console.log("store 模块写法:", this.$store.state.user);
},
1.png
7.映射方法的使用 访问
就是辅助函数
解决访问的时候 过长的问题
user和和store里面的modules里面的保持一致
1.引入
import {mapState,mapMutations} from "vuex"
2. 计算属性
computed: {
// 映射 state里面 user 的状态
...mapState('user',["userInfo"]),
userInfo() {
// 缺点就是访问的时候 比较麻烦
return this.$store.state.user.userInfo;
},
},
3. 直接访问
console.log("store 模块写法:", this.userInfo);
4. 修改
2种写法 选一个即可
methods: {
...mapMutations('user',["userInfoMutation"]),
test() {
// this.$store.commit("user/userInfoMutation", {
// test: "测试",
// name: "module写法",
// });
this.userInfoMutation({test:"测试",name:"辅助函数"})
console.log("store 模块写法:", this.userInfo);
},
8. getter辅助
和之前的写法一样,前面多个 命名空间就行
computed:{
...mapGetters("user",["vipList"],
}
9. 目录结构
1.png
