vuex-module
2021-11-25 本文已影响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: { age: 18, name: "82期" },
mutations: {
sayHello(state) {
state.age++
}
},
actions:{
sayAction({commit},){
setTimeout(()=>{
commit("sayHello")
})
}
},
getters: {
//参数直接解构
doubleAge({ age }) {
return age * 2
}
}
}
4. store
1.这2种拆分可以共存,这里都放这做个演示
2.这里额外用了持久化 可以不用在意 以前的代码懒得改了o(╯□╰)o
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import { createStore } from 'vuex'
import userModule from './modules/user.js'
// 1. 引入持久化库
import VuexPersistence from 'vuex-persist'
// 2. 创建持久化对象
const vuexLocal = new VuexPersistence({
storage: window.localStorage
})
export default createStore({
state ,
getters,
strict: true,
mutations,
actions,
// 3. 持久化配置 vuex
plugins: [vuexLocal.plugin],
modules: {
userModule
}
})
大体的目录结构
1.png
5. state getters 基础访问
访问的时候 比之前多了一层
userModule,所以不会重名
注意
1.这
userModule和store里面的modules配置保持一致
5.1直接访问
$store.state.userModule.age
缺点就是访问的时候 比较麻烦
5.2 计算属性
可以起别名 避免和本组件的名字重复
computed: {
age2() {
return this.$store.state.userModule.age;
}
},
5.3 getters
注意用法 和
state不一样哦
computed: {
db2() {
//模块名
return this.$store.getters["userModule/doubleAge"];
},
},
6.基础修改
使用的时候 比之前多了一层
userModule,所以不会重名
注意
1.这
userModule和store里面的modules配置保持一致
2.一定要在模块里面开启命名空间namespaced:true,
6.1 mutation
// 模块的名字/方法
this.$store.commit("userModule/sayHello");
6.2 action
this.$store.dispatch("userModule/sayAction")
7. 辅助函数/映射方法的使用访问
解决访问的时候字符过长的问题
userModule和和store里面的modules的配置保持一致
7.1引入
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
这里把常用的辅助函数都引用了
7.2 mapState
1.都是写在
computed里面
2.数组的形式,不起别名
...mapState("userModule",["age"]),
起别名
...mapState("userModule",{
mapAge:state=>state.age
}),
7.3 mapGetters
1.也是写在
computed里面哦
...mapGetters("userModule",["doubleAge"]),
7.4 mapMutations
- 写到
methods里面
methods: {
...mapMutations("userModule",["sayHello"]),
updateAgeMap() {
this.sayHello()
},
7.5 mapActions
- 写到
methods里面
methods: {
...mapActions("userModule",["sayAction"])
actionMap(){
this.sayAction()
},
