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 相关文章推荐
利用js对象弹出一个层
Mar 26 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
JavaScript原型链详解
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
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
Python发展简史 Python来历
2019/05/14 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
python设置随机种子实例讲解
2019/09/12 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
幼儿园教师请假制度
2014/01/16 职场文书
出纳员岗位职责
2014/03/13 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
早会开场白台词大全
2015/06/01 职场文书
退休欢送会主持词
2015/07/01 职场文书