Vuex-modules的使用

一、什么是modules？

modules是模块的意思。

为什么要在vuex中使用模块呢？

Vue使用单一状态树，那么也意味着很多状态都会交给Vuex来管理。
当应用变得非常复杂时，store对象就有可能变得相当臃肿。
所以vuex允许我们将store分割成模块（modules），而每个模块拥有自己的state、mutations、actions、getters等

就像下面这个意思：

modules:{moduA:{state:{},mutations:{},actions:{},getters:{}}
}

当然了，如果要划分的清晰一点，可以这样做：（在store文件夹下的index.js中）

//创建对象
const moduleA = {state:{name:'aaa'},mutations:{updateName(state,payload){state.name = payload}},actions:{},//第一个参数是state，第二个是getters，第三个是根rootstategetters:{jianame(state){return state.name+'1111'},jianame2(state,getters){return getters.jianame +'222'},jianame3(state,getters,rootstate){return getters.jianame2 + rootstate.counter}}
}
const store = new Vuex.store({state:{counter:'hhhh'},mutations:{},actions:{},getters:{}modules:{a:moduleA
}
})

在使用的组件中：

<template><h3>{{$store.state.a.name}}</h3><h2>{{$store.getters.jianame}}</h2><h2>{{$store.getters.jianame1}}</h2><h2>{{$store.getters.jianame3}}</h2><button @click='Updatename'>修改信息</button>
</template>
<script>export default{name:'app',methods:{Updataname(){this.$store.commit('updateName','bbb')}}}
</script>

commit提交的内容会先去store中的mutations中找，找不到再到模块中去找。定义函数的时候最好不要同名！

modules里的getters可以像上面那样去使用

Vuex-modules的使用相关推荐

vuex modules ajax,VUE项目爬坑---6、vuex的真正存在的意义是什么
VUE项目爬坑---6.vuex的真正存在的意义是什么一.总结一句话总结: a.[避免低效的数据传递]:当多个组件嵌套的时候,只能父子传递,那么中间的组件只能做传递数据之用,数据不是它用,它却传递 ...
vuex modules 命名空间
主要为了分清每个模块相同名称的方法用法:export default {namespaced: true,} 分清模块:导入/方法转载于:https://www.cnblogs.com/wly- ...
使用vuejs 2.x (不是nuxt) 做个demo: 使用 vuex, router ( store, action , mutation)
使用命令创建项目根据图片提示选择需要的内容,选择vuex router 按空格进行多选 vue create vuex1 cd vuex1 yarn serve 假设,我们有两个页面: " ...
vuex 配置使用解析 mutations响应式规则 Vue.delete/set 目录划分
文章目录用处解析结构单一状态树 state getters使用 mutations mutations 提交风格 mutations 响应规则 mutations 常量类型名称使用常量 mu ...
Vuex 终极秘籍总结
Vuex 终极秘籍总结一.什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发 ...
使用Vue构建中(大)型应用
想做SPA就快上车! init 首先要起一个项目,推荐用vue-cli安装 $ npm install -g vue-cli $ vue init webpack demo $ cd demo $ n ...
require.context
带表达式的 require 语句如果你的 require参数含有表达式(expressions),会创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块 ...
axios传数组到后台_我是如何让公司后台管理系统焕然一新的
作者:yeyan1996 https://juejin.im/post/5c76843af265da2ddd4a6dd0 写在前面马上到了金三银四的时间,很多公司开启了今年第一轮招聘的热潮,虽说今年 ...
前端技巧培训-后台战友快速入门
前端技巧培训-后台战友快速入门一.工具 webstorm/vscode node环境/npm (一般安装node自带安装npm的) 可以安装淘宝镜像(下载依赖包比较快) node安装教程淘宝镜像安 ...
我是如何让公司后台管理系统焕然一新的(上) -性能优化
在这个项目中你有遇到什么技术难点,你是怎么解决的? 其实这个问题旨在了解你在遇到问题的时候的解决方法,毕竟现在前端技术领域广,各种框架和组件库层出不穷,而业务需求上有时纷繁复杂,观察一个程序员在面对未 ...

Vuex-modules的使用

一、什么是modules？

Vuex-modules的使用相关推荐

最新文章

热门文章