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中Math对象方法使用概述
Jan 02 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 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
Drupal简体中文语言包安装教程
2014/09/27 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
简单的分页代码js实现
2016/05/17 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
Python绘制动态水球图过程详解
2020/06/03 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
个人维稳承诺书
2015/05/04 职场文书
在职证明范本
2015/06/15 职场文书
观后感开头
2015/06/19 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
浅析Python中的随机采样和概率分布
2021/12/06 Python
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS