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 可以拖动的DIV(二)
Jun 26 Javascript
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
Vue中错误图片的处理的实现代码
Nov 07 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处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
smarty缓存用法分析
2014/12/16 PHP
php制作动态随机验证码
2015/02/12 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
浅析Python中的join()方法的使用
2015/05/19 Python
python读取和保存视频文件
2018/04/16 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python sqlite的Row对象操作示例
2019/09/11 Python
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
《泉水》教学反思
2014/04/11 职场文书
学校运动会感想
2015/08/10 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
Go语言grpc和protobuf
2022/04/13 Golang
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS