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 showModalDialog模态对话框使用说明
Dec 31 Javascript
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
js 走马灯简单实例
Nov 21 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
js中less常用的方法小结
Aug 09 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 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删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
pandas数据处理之绘图的实现
2020/06/15 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
python中取绝对值简单方法总结
2020/07/24 Python
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
最新奶茶店创业计划书范文
2014/02/08 职场文书
县级文明单位申报材料
2014/05/23 职场文书
计划生育责任书
2015/05/09 职场文书
人与自然的观后感
2015/06/18 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL