vuex的module模块用法示例


Posted in Javascript onNovember 12, 2018

想尝试使用vuex的module来进行操作,看了一些资料,我简单进行了一个简化

目录结构:

store
│ index.js
│ 
├─feeds
│   actions.js
│   getters.js
│   index.js
│   mutation-type.js
│   mutations.js
│   state.js
│   
└─movies
    actions.js
    getters.js
    index.js
    mutation-type.js
    mutations.js
    state.js

这里是两个模块feeds和movies

第一步:在store文件夹下的index.js入口文件写入:

import Vue from 'vue';
import Vuex from 'vuex';
import feeds from './feeds';
import movies from './movies';

Vue.use(Vuex);

export default new Vuex.Store({
 modules: {
  feeds,
  movies
 },
});

第二步:在每个模块内的index文件这组装所有的零件,并且输出:

import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

export default {
    namespaced: true, //多出的一行
    state,
    mutations,
    actions,
    getters
};

注意上面多出的一行,我们在组件里怎么区分不同模块呢?namespaced写成true,意思就是可以用这个module名作为区分了(也就是module所在的文件夹名)

第三步:在组件里使用:

使用的时候

获取state,这里使用映射:

import { mapState, mapMutations } from "vuex";

export default {
computed:{
  ...mapStated('模块名(嵌套层级要写清楚)',{ //比如'movies/hotMovies
    a:state=>state.a,
    b:state=>state.b
  })
},

触发actions操作:

import { mapActions } from 'vuex'
methods:{
  ...mapActions('模块名(嵌套层级要写清楚)',[ //比如'movies/getHotMovies
    'foo',
    'bar'
  ])
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈JavaScript字符集
May 22 Javascript
Node.js的包详细介绍
Jan 14 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
了解JavaScript中的选择器
May 24 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
React手稿之 React-Saga的详解
Nov 12 #Javascript
基于游标的分页接口实现代码示例
Nov 12 #Javascript
React Hooks的深入理解与使用
Nov 12 #Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 #Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 #jQuery
微信小程序左滑删除功能开发案例详解
Nov 12 #Javascript
微信运维交互机器人的示例代码
Nov 12 #Javascript
You might like
php把文件设置为插件的技巧方法
2020/02/03 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
python实现360的字符显示界面
2014/02/21 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
对python中UDP,socket的使用详解
2019/08/22 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
python属于跨平台语言码
2020/06/09 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
考核工作实施方案
2014/03/30 职场文书
社会实践活动总结范文
2014/07/03 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
党员先进事迹材料
2014/12/19 职场文书
2015年共青团工作总结
2015/05/15 职场文书
社区宣传标语口号
2015/12/26 职场文书