vue2.x之vuex module模块学习笔记（二）

已于 2023-03-29 11:14:15 修改
阅读量1.4k 收藏 2
点赞数 2
分类专栏： Vue2.x、vuex、iview、vux 文章标签： 学习 vue.js javascript
于 2019-08-15 09:43:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbiao68/article/details/99621488
版权

文章目录

一、文章参考

  1. https://vuex.vuejs.org/zh/guide/modules.html
  2. vue：vuex中mapState、mapGetters、mapActions辅助函数及Module的使用

问题描述

工作中，如果将所有的数据放到一个state中，数据量非常大就不便于维护，尤其是项目比较大分模块开发的时候，为了彼此不影响和便于维护，就需要加state通过命名空间隔离，因此大的项目就必须采用Vuex的模块命名。

学习条件

了解Vuex前面的基础 —— state、mutations、actions、getters

二、快速入门 vuex module模块

  1. 创建 one 和 two 两个 vuex module

one.js

export default {
  namespaced: true, // 需要命名空间隔离
  state () {
    return {
      name: 'one'
    }
  },
  getters: {
  },
  mutations: {
    changeName (state) {
      state.name = 'one-changeName'
    }
  },
  actions: {
  }
}

two.js

export default {
   state () {
      return {
         name: 'two'
      }
   },
   getters: {
   },
   mutations: {
      changeName (state) {
         state.name = 'two-changeName'
      }
   },
   actions: {
   }
}
  1. 将one和two两个vuex的模块引入进来
import { createStore } from 'vuex'
import one from './one'
import two from './two'

export default createStore({
  state () {
    return {
      name: 'xxx'
    }
  },
  getters: {
  },
  mutations: {
    changeName (state) {
      state.name = 'xxx-changeName'
    }
  },
  actions: {
  },
  modules: {
    one,
    two,
  }
})
  1. 工程中引入 vuex
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)
app.use(router) // 加载路由
app.use(store) // 价值 vuex
app.mount('#app')
  1. 测试vuex的 module
<template>
  <div>store: {{ $store.state.name }}</div>
  <div>one.store: {{ $store.state.one.name }}</div>
  <div>two.store: {{ $store.state.two.name }}</div>
  <div>
    <button @click="changeName">改变name 的值</button>
  </div>
  <div>
    <button @click="changeModuleOneName">改变module one 的name 的值</button>
  </div>
</template>

<script>
export default {
  created() {},
  mounted() {},
  data() {
    return {};
  },
  methods: {
    changeName () {
      this.$store.commit('changeName')
    },
    changeModuleOneName () {
      this.$store.commit('one/changeName')
    }
  },
};
</script>

访问 state 中的数据结果如下：
在这里插入图片描述

改变 state 中的数据效果如下：

在这里插入图片描述

改变 module one state 中的数据效果如下：

在这里插入图片描述

结论：

  1. 如果使用 modules 定义vuex，则state 是被隔离的，例如: $store.state.two.name
  2. 如果module中没有定义 namespaced: true, 则 mutations 的方法是针对全范围所有定义mutations
  3. 如果定义了 namespaced: true,则需要添加 命名空间触发，例如this.$store.commit('one/changeName')

三、如何使用 module 拆分巨大的Vuex 对象

简单sample 说明

定义的vuex module要设置namespaced: true,

import state from './countState'
import mutations from './countMutations'
import getters from './countGetters'
import actions from './countActions'

export default {
    // 采用了命名空间，默认值为false
    namespaced: true,
    state,
    getters,
    actions,
    mutations
}

自定义的Vuex module对象要挂载在 modules属性下

import countStore from './count/countIndex'
//创建store仓库暴露出去
export default new Vuex.Store({
	 modules: {
		 countModule: countStore
	 }
})

vuex模块文件管理

  1. 将一个模块设置为一个文件夹
  2. 文件夹下包含state、mutations、actions、getters，分别代表各自的数据
  3. 定义一个moduleIndex.js 文件，作为一个导出文件

state 文件

export default {
    count: 0
}

mutations 文件

export default {
    // state 是对应命名空间下面的state
    // paramObj 是传递过来的参数
    addCount: function (state, paramObj) {
        state.count = state.count + paramObj.step;
    },
    minuseCount: function (state, paramObj) {
        state.count = state.count - paramObj.step;
    }
}

actions 文件

export default {
    increment: function (context) {
        console.dir(context);
        debugger
        window.setTimeout(function () {
            context.commit({
                type: 'addCount',
                step: 2
            });
        }, 1000);
    },
    // {} 内的参数是 context 上下文中包含的对象
    reduce: function ({commit, dispatch, state, rootState, getters, rootGetters}) {
        window.setTimeout(function () {
            commit({
                type: 'minuseCount',
                step: 1
            });
        }, 1000);
    }
}

getters 文件

export default {
    getDoubleNum: function (state) {
        debugger
        return state.num * 2;
    }
}

countIndex 文件

import state from './countState'
import mutations from './countMutations'
import getters from './countGetters'
import actions from './countActions'

export default {
    // 采用了命名空间，默认值为false
    namespaced: true,
    state,
    getters,
    actions,
    mutations
}

针对模块的 mapState

methods: {
    // 添加
    addNum: function () {
        debugger
        this.$store.commit({
            type:'countModule/addCount',
            step: 1
        });
    },
    // 删除
    minuseNum: function () {
        this.$store.commit('countModule/minuseCount', {
            step: 2
        });
    },
    // 异步调用Action 触发事件
    addNumAction: function () {
        this.$store.dispatch('countModule/increment');
    },
    // // 异步调用Action 触发事件
    // minuseNumAction: function () {
    //     this.$store.dispatch('countModule/reduce');
    // }
    // 与上面等价
    ...mapActions('countModule',[
        'reduce'  //  this.$store.dispatch('countModule/reduce');
    ]) 
},

针对模块的 mapActions

computed: {
    myname: function () {
        return this.name + ' of hubei';
    },
    ...mapState({
        count: function (state) {
            console.dir(state);
            return state.countModule.count;
        }
    }),
    ...mapState('countModule',{
        countNew: 'count'
    }),
    doubleNum: function () {
        debugger
        return this.$store.state.countModule.count * 2;
    }
}

Vue界面关联

<template>
  <div>
      <div>{{myname}}</div>
      <div>count : {{count}}</div>
      <div>countNew : {{countNew}}</div>
      <div>double count: {{doubleNum}}</div>
      <div>
          <button @click='addNum'>同步 添加 </button>
      </div>
      <div>
          <button @click='addNumAction'>异步 添加 </button>
      </div>
      <div>
          <button @click="minuseNum">同步减少 </button>
      </div>
      <div>
          <!-- <button @click="minuseNumAction">异步减少 </button> -->
          <button @click="reduce">异步减少 </button>
      </div>
  </div>
</template>

<script>
// mapGetters 和 mapMutations 就是尝试了一下，关于有命名空间，尝试了多种办法，没有结果
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'
export default {
    data: function () {
        return {
            name: 'countModule/huangbiao'
        }
    },
    mounted: function () {
        console.dir(this);
        debugger
    },
    methods: {
        // 添加
        addNum: function () {
            debugger
            this.$store.commit({
                type:'countModule/addCount',
                step: 1
            });
        },
        // 删除
        minuseNum: function () {
            this.$store.commit('countModule/minuseCount', {
                step: 2
            });
        },
        // 异步调用Action 触发事件
        addNumAction: function () {
            this.$store.dispatch('countModule/increment');
        },
        // // 异步调用Action 触发事件
        // minuseNumAction: function () {
        //     this.$store.dispatch('countModule/reduce');
        // }
        // 与上面等价
        ...mapActions('countModule',[
            'reduce'  //  this.$store.dispatch('countModule/reduce');
        ]) 
    },
    computed: {
        myname: function () {
            return this.name + ' of hubei';
        },
        ...mapState({
            count: function (state) {
                console.dir(state);
                return state.countModule.count;
            }
        }),
        ...mapState('countModule',{
            countNew: 'count'
        }),
        doubleNum: function () {
            debugger
            return this.$store.state.countModule.count * 2;
        }
    }
}
</script>

<style>

</style>

三、文件夹的管理

  1. 目录接口如下图所示：
    在这里插入图片描述

  2. 各个模块的js结构如下
    在这里插入图片描述

  3. 使用index.js 将各个模块串联起来

import Vue from 'vue'
import Vuex from 'vuex'
import routes from '../router/routes'

const files = require.context('./modules', false, /\.js$/)
console.log("%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%")
// ƒ webpackContext(req) {
// 	return __webpack_require__(webpackContextResolve(req));
// }
console.log(files)
// undefined
console.log(JSON.stringify(files))
// ["./location.js","./map.js","./pc-controller.js","./police-manage.js","./road-conf.js","./road-manage.js"]
console.log(JSON.stringify(files.keys()))
let modules = {}
files.keys().forEach(key => {
    if (key === './index.js') return
    // {default: {…}, __esModule: true}
    // default:
    //     actions: {fetchTaskList: ƒ, fetchRoadList: ƒ}
    //     mutations: {taskList: ƒ, roadList: ƒ, currentTaskIndexCode: ƒ, currentRoadIndexCode: ƒ, selectedShowRoadsIndexCode: ƒ}
    //     namespace: "road-manage"
    //     namespaced: true
    //     state: {…}
    console.log(files(key))
    let module = files(key).default
    modules[module.namespace] = module
})
Vue.use(Vuex)

export default new Vuex.Store({
    state: {},
    getters: {},
    mutations: {},
    actions: {},
    modules,
})
Vue2.x之Vuex Module模块
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-28 1255
Module模块是Vuex中的一个核心概念，它允许我们将应用的状态拆分成多个模块，每个模块都可以有自己的state、mutations、actions和getters。通过上述内容，我们不仅了解了如何在Vue 2.x项目中使用Vuex的Module模块，还学习了如何解决常见的问题及一些实用的技巧。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。在实际项目中，合理地使用Vuex Module模块可以提高状态管理的效率和清晰度。
【vue2第二十一章】vuex 分模块 module核心概念
weixin_72979483的博客
09-25 900
vuex module是什么？ 在Vuex中，module（模块）是将状态和相关逻辑封装在一起的一种方式。模块可以看作是Vuex状态的一部分，用于管理应用程序中特定的状态部分。 **使用模块化的方式，可以将Vuex的状态划分为多个模块，每个模块负责管理和维护特定的状态和相关操作。可以将模块看作是Vuex状态的子集，每个模块拥有自己的state、mutations、getters和actions等。** 一个模块可以包含以下内容： - state：模块的状态，类似于根状态的state，用于存储数据。
vue2 vuex模块化设计
qq_44886882的博客
08-25 790
为了方便vuex使用，简单进行vuex的模块化设计，这里仅仅针对vue2，vue3有更简单的pinia，本身就是按照模块化进行的设计，因此不讨论。
vue2中vuex的终极模块化和使用
m0_56986233的博客
03-30 416
vuex的模块化使用
vuex中的modules使用
shark1978的专栏
02-26 1031
模块，向store注入其他子模块，可以将其他模块以命名空间的方式引用。{pid:1,pname:'牛逼1',price:10000},{pid:2,pname:'牛逼2',price:20000},{pid:3,pname:'牛逼3',price:30000},{pid:4,pname:'牛逼4',price:40000},为了拆分state中的数据，提高可维护性，防止修改时的覆盖和重名。{pid:5,pname:'牛逼5',price:50000}通过命名空间调模板中的 修改器。
vue学习笔记（十）——Vuex（状态管理，组件间共享数据）
最新发布
weixin_56370772的博客
07-19 1127
mutations是一个对象，对象中存放修改state的方法。
学习笔记：Vuex及Vuex模块化
weixin_58257357的博客
04-01 1056
一.什么是Vuex? Vuex就是一个仓库，用来集中化管理所有组件的状态，它能够完成任意组件间的数据共享，他就像一个公用的大仓库，包含了所有组件的数据，可以供任意组件使用，虽然过程有些繁琐，但是搭建好之后会让你的思路国家顺畅，结构更加清晰，最重要的是代码会易于维护。 二.安装vuex（） 1. npm i vuex@'版本号'====>这里大家一定要注意，下载vuex一定要下在对应vue版本的，即 vue2----vuex3 Vue3---vuex4...
Vue学习笔记 —— Vuex之Models（模块化管理模式）
weixin_43340295的博客
11-23 2882
Models（模块化管理模式） Vuex的模块化管理模式即是，将store 分割成若干个模块（module）。其中每个模块拥有自己的 state、mutation、action、getter。 配置 // store/index.js models:{ a:{ state:{}, mutation{} getters:{}, .... } } 调用（models中的state） this.$store.state.a
Vuex 4源码学习笔记 - Vuex是怎么与Vue结合？（三）
小帅的编程笔记
11-21 927
在上一篇笔记中：Vuex源码学习笔记 - Vuex开发运行流程（二） 我们通过运行npm run dev命令来启动webpack，来开发Vuex，并在Vuex的createStore函数中添加了第一个断点。 那么在看源码之前，建议先要熟悉Vuex的使用，如果还不熟练使用，那么在看的时候很容易会发蒙。 我们来复习下Vuex中的几个重要概念和使用 State - 存储状态 Getter - 类似计算属性 Mutation - 更改状态的唯一方法是提交 mutation。 Action - 可以包含任意异步操作
Vuex 4源码学习笔记 - 通过dispatch一步步来掌握Vuex整个数据流（五）
小帅的编程笔记
11-23 1212
在上一篇笔记中：Vuex 4源码学习笔记 - Store 构造函数都干了什么（四） 我们通过查看Store 构造函数的源代码可以看到主要做了三件事情： 初始化一些内部变量以外 执行installModule来初始化module以及子module， 执行resetStoreState函数通过Vue3的reactive使store的状态实现“响应式”）。 今天我们我们通过官方的购物车示例来查看Vuex内部的工作流程，示例代码在examples/composition/shopping-cart文件夹内 Vu
如何在vue2脚手架中使用vuex，以及模块化
小聂博客
12-04 640
如何在vue2脚手架中使用vuex，以及模块化
vuex的分模块化与辅助函数
hjdjhh的博客
01-07 1114
目录 分模块化 怎么分模块 模块化后，在vue组件里的使用 vuex的辅助函数 都有什么辅助函数 默认为vuex的index.js的辅助函数 引入 注意事项： 两种遍历方式 分模块后的使用辅助函数 需引入一些数据 使用方法 除命名外，其他遵循以上规则 分模块化 怎么分模块 1 在vuex的store文件夹里添加一个js文件，内容如下 export default { // 代表这是一个命名独立的空间，不会与index.js里的命名冲突与污染 namespaced:t...
Vue项目中的两个模块
gh4188的博客
11-07 376
模块总结
vue2中vuex的基本使用以及进阶使用
Motion_zq的博客
07-04 1423
vue2中vuex的使用
vuex之module的使用
快乐de馒头
08-01 4600
page=${context.state.page}&size=${context.state.size}&username=${object.query}this.$store.dispatch('user/getAllUserList',{_thisthis,querythis.query})//this是Vue实例。//有命名空间提交方式，类似this.$store.dispatch("user/getAllUserList");//将token设置在请求头中提交,已经在拦截器中设置。...
Vuex之module的使用
youhebuke225的博客
06-21 1605
vuex的module
Vue2.x
l_537的博客
08-18 848
Vue2.x入门，涵盖大部分知识点
Vue2.X Vuex
cc常 的博客
03-18 202
Vue2.x Vuex 写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！ 学习来源： Vue + Vue-Cli 快速入门教程 李南江老师各平台账号： 微博：极客江南 微信公众号：李南江 腾讯课堂： 李南江 网易云课堂：李南江 html代码： <div id="app"> <!-- 3.使用注册好的组件--> <abc></abc> </div> vue代码： // 1.创建组件构造器 let Profile
Vue2.x中的Vuex
qq_44930306的博客
12-23 2246
这张主要包含了Vuex的具体用法
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值