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 } })
大体的目录结构
![}WU_TK1CA~4]MM)07{JPPPB.png](https://ucc.alicdn.com/pic/developer-ecology/66b49c9171924e3bafd1d86719163584.png?x-oss-process=image/resize,w_1400/format,webp "}WU_TK1CA~4]MM)07{JPPPB.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() },
