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); },
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"], }
![}S%`]OJ(T0[`WY_SE~2)UDN.png](https://ucc.alicdn.com/pic/developer-ecology/2ee50be47beb4a77a9837cda27df581f.png "}S%`]OJ(T0[`WY_SE~2)UDN.png")
