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 Array扩展实现代码
Oct 14 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 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 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
javascript调试说明
2010/06/07 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
js实现录音上传功能
2019/11/22 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
python微信公众号开发简单流程
2018/03/23 Python
对Python中内置异常层次结构详解
2018/10/18 Python
python xpath获取页面注释的方法
2019/01/14 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
老师对学生的寄语
2014/04/09 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
交通文明倡议书
2014/05/16 职场文书
安全环保标语
2014/06/09 职场文书
标准单位租车协议书
2014/09/23 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python