vuex的module模块用法示例

想尝试使用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'
  ])
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 深入理解Vuex 模块化(module)

    一.为什么需要模块化 前面我们讲到的例子都在一个状态树里进行,当一个项目比较大时,所有的状态都集中在一起会得到一个比较大的对象,进而显得臃肿,难以维护.为了解决这个问题,Vuex允许我们将store分割成模块(module),每个module有自己的state,mutation,action,getter,甚至还可以往下嵌套模块,下面我们看一个典型的模块化例子 const moduleA = { state: {....}, mutations: {....}, actions: {....},

  • vuex的module模块用法示例

    想尝试使用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和m

  • python中hashlib模块用法示例

    我们以前介绍过一篇Python加密的文章:Python 加密的实例详解.今天我们看看python中hashlib模块用法示例,具体如下. hashlib hashlib主要提供字符加密功能,将md5和sha模块整合到了一起,支持md5,sha1, sha224, sha256, sha384, sha512等算法 具体应用 #!/usr/bin/env python # -*- coding: UTF-8 -*- #pyversion:python3.5 #owner:fuzj import h

  • python开发中module模块用法实例分析

    本文实例讲述了python开发中module模块用法.分享给大家供大家参考,具体如下: 在python中,我们可以把一些功能模块化,就有一点类似于java中,把一些功能相关或者相同的代码放到一起,这样我们需要用的时候,就可以直接调用了 这样做的好处: 1,只要写好了一个功能模块,就可以在以后调用,代码的重用就可以体现出来了 2,功能写好了以后,不会发生错误.如果一个相同的功能,我们在一个模块中写了一遍,在另外的模块中又写了一遍......这样我们难免保证我们在写的过程中不发生错误. 但是我们如果

  • Node.js API详解之 module模块用法实例分析

    本文实例讲述了Node.js API详解之 module模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 module Node.js 有一个简单的模块加载系统. 在 Node.js 中,文件和模块是一一对应的(每个文件被视为一个独立的模块). 例子,假设有一个名为 foo.js 的文件: const circle = require('./circle.js'); console.log(`半径为 4 的圆的面积是 ${circle.area(4)}`); 在第一行中,

  • AngularJS路由Ui-router模块用法示例

    本文实例讲述了AngularJS路由Ui-router模块用法.分享给大家供大家参考,具体如下: 由于某些设计原因,AngularJS原生的路由模块有一些缺点,比如说不支持view的嵌套等,所以有许多社区开始自己设计路由模块,最有代表性的就是ui-route了. ui-route是一个功能强大的路由模块,它在原生的ng-route模块上加强了其他方面的功能. 现在就开始做几个DEMO接触一下ui-route. <!--初始页面--> <!doctype html> <meta

  • Python pymongo模块用法示例

    本文实例讲述了Python pymongo模块用法.分享给大家供大家参考,具体如下: MongoDB优点 MongoDB是一个为当代web应用而生的noSQL数据库,它有如下优点: 1.文档型存储.可以把关系型数据库的表理解为一个电子表格,列表示字段,每行的记录其实是按照列的字段顺序排列的值得元组.而存储在MongoDB中的文档被存储为键-值对的形式,值却可以是任意类型且可以嵌套.之前在用关系型数据库的时候,我们把产品信息打散到不同的表中,要通过关系表或者使用join拼接成复杂的SQL语句的方式

  • Python logging模块用法示例

    本文实例讲述了Python logging模块用法.分享给大家供大家参考,具体如下: logging模块 函数式简单配置 import logging logging.debug('debug message') logging.info('info message') logging.warning('warning message') logging.error('error message') logging.critical('critical message') logging.bas

  • nodejs中方法和模块用法示例

    nodejs中方法和模块用法示例

    本文实例讲述了nodejs中方法和模块用法.分享给大家供大家参考,具体如下: 在nodejs中方法的调用是怎样的呢? 一起来愉快的写代码吧 . var express = require("express"); var app = express(); var hostName = "127.0.0.1"; var port = 8080; app.all("*",function(req,res,next){ res.header("

  • nodejs入门教程六：express模块用法示例

    nodejs入门教程六：express模块用法示例

    本文实例讲述了nodejs入门教程之express模块用法.分享给大家供大家参考,具体如下: /** * Created by Dason on 2017/3/28. */ var express = require('express'); var morgan = require('morgan');//打印日志的中间件 //创建express 的实例 var app = express(); /** * 中间件: * Connect: Node.js的中间件框架 * 分层处理:每层实现一个功

  • Python minidom模块用法示例【DOM写入和解析XML】

    本文实例讲述了Python minidom模块用法.分享给大家供大家参考,具体如下: 一.DOM写XML文件 # -*- coding:utf-8 -*- #!python3 #导入minidom from xml.dom import minidom # 1.创建DOM树对象 dom=minidom.Document() # 2.创建根节点.每次都要用DOM对象来创建任何节点. root_node=dom.createElement('root') # 3.用DOM对象添加根节点 dom.ap

随机推荐