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 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
Openlayers实现地图全屏显示
Sep 28 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和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
取选中的radio的值
2010/01/11 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
python函数的5种参数详解
2017/02/24 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
应用电子专业学生的自我评价
2013/10/16 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
Redis高可用集群redis-cluster详解
2022/03/20 Redis