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无缝滚动代码
Jan 03 Javascript
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
vue v-on:click传递动态参数的步骤
Sep 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
JavaScript用select实现日期控件
2015/07/17 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
Python isinstance判断对象类型
2008/09/06 Python
Python打印斐波拉契数列实例
2015/07/07 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
简单说说tomcat的配置
2013/05/28 面试题
毕业生实习鉴定
2013/12/11 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
学生评语大全
2014/04/18 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
python turtle绘图
2022/05/04 Python
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android