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 相关文章推荐
jquery创建div 实现代码
Apr 27 Javascript
网页中的图片的处理方法与代码
Nov 26 Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
使用js实现数据格式化
Dec 03 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
Bootstrap响应式表格详解
May 23 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
JS实现点星星消除小游戏
Mar 24 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图形计数器程序显示网站用户浏览量
2016/07/20 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
xtree.js 代码
2007/03/13 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
python解析xml模块封装代码
2014/02/07 Python
Python实现的石头剪子布代码分享
2014/08/22 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
python模块之paramiko实例代码
2018/01/31 Python
python读取文件名称生成list的方法
2018/04/27 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
python树莓派红外反射传感器
2019/01/21 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
python实现邮件发送功能
2019/08/10 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
幼儿园英语教学反思
2014/01/30 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
实习证明格式范文
2014/10/14 职场文书
出国导师推荐信
2015/03/25 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server