nuxt框架中对vuex进行模块化设置的实现方法

1.Nuxt里怎么使用vuex?

Nuxt.js 内置引用了 vuex 模块，所以不需要额外安装。

Nuxt.js 会尝试找到应用根目录下的 store 目录，如果该目录存在，它将做以下的事情：
1.1> 引用 vuex 模块
1.2> 将 vuex 模块 加到 vendors 构建配置中去
1.3> 设置 Vue 根实例的 store 配置项

Nuxt.js 支持两种使用 store 的方式：
普通方式： store/index.js 返回一个 Vuex.Store 实例
模块方式： store 目录下的每个.js 文件会被转换成为状态树指定命名的子模块 （当然，index 是根模块）

2.Nuxt中怎么对vuex进行模块化设置?

2.1> 例如 -- 设置index.js为根模块,child1.js与child2.js两个子模块

2.2> 在store/index.js 中不需要返回 Vuex.Store 实例，可以直接将 state、mutations 和 actions 暴露出来：
(以下为例:index中存储商品总价,child1中存储单价,child2中存放数量)

export const state = () =>({
 totalPrice:0,
});
export const mutations = {
 totalPrice (state) { //总价
 // state.totalPrice = state.num*state.price 错误方式:使用子模块的state,应该在变量名前加上文件名,如下
 state.totalPrice = state.child1.price*state.child2.num //正确方式
 }
};

子模块中同样直接将 state、mutations 和 actions 暴露出来：

child1.js1

export const state = () =>({
 price:10, //单价
});
export const mutations = {
 getPrice(state,price) {
 state.price= price
 }
};

child2.js2

export const state = () =>({
 num:5,
});
export const mutations = {
 getNum(state,num) { //数量
 state.num= num
 }
};

3.在vue文件中获取vuex的数据,调用mutation中的方法修改数据

<script>
export default {
 name : 'test',
 data() {
 return {
 totalPrice:this.$store.state.totalPrice, //取index.js(根模块)中的值
 num:this.$store.state.child2.num,  //取子模块中的值
 price:this.$store.state.child1.price, //取子模块中的值
 }
 },
}
</script>
 methods: {
 setTotalPrice(){
 this.$store.commit('totalPrice')
 },
 setNum(){
 this.$store.commit('child2/getNum',参数) //使用子模块的mutation中的方法 this.$store.commit(‘文件名/方法名',参数)
 },
 setPrice(){
 this.$store.commit('child1/getPrice',参数) //使用子模块的mutation中的方法
 },
 },

补充: 使用子模块的action： this.$store.dispatch(‘文件名/变量名')

参考链接:
https://www.jb51.net/article/169502.htm
https://www.jb51.net/article/169504.htm

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

赞 (0)

相关推荐

  • Vuex 模块化使用详解

    前言 上回我们说了一下 vuex 的简单使用,最后面的时候有说了,由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module).每个模块拥有自己的 state.mutation.action.getter.甚至是嵌套子模块--从上至下进行同样方式的分割,今天我们也来简单了解一下他的使用,深入学习可能还是要去看官方文档 1 文件结构 文件结构的话,模块化的使用

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

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

  • 通过一个简单的例子学会vuex与模块化

    通过一个简单的例子学会vuex与模块化

    前言 Vuex 强调使用单一状态树,即在一个项目里只有一个 store,这个 store 集中管理了项目中所有的数据以及对数据的操作行为.但是这样带来的问题是 store 可能会非常臃肿庞大不易维护,所以就需要对状态树进行模块化的拆分. 这篇文章预设你已经了解vue相关的基础知识,因此本文不再赘述.需要学习的朋友可以参考这篇文章:http://www.jb51.net/article/110212.htm 对vuex的定位和解释可以看官方文档,说的很详细了,需要的朋友也可以通过这篇文章进行详细的

  • 详解Vuex下Store的模块化拆分实践

    前言 最近的项目用到了 vue.js + vuex + vue-router 全家桶,版本为 >2.0,在搞Store的时候发现,圈子里大部分关于vuex的文章都是比较基础的Demo搭建方式,很少有涉及到比较复杂的模块化拆分的Store实践,而且事实上也有朋友在实践中问到过这方面的内容,vuex自身提供了模块化的方式,因此在这里总结一下我自己在项目里的心得. 模块化拆分 vue.js的项目文件结构在这里就不说了,大家可以通过vue-cli初始化项目,脚手架会为你搭建一个start项目的最佳实践.

  • Vuex 进阶之模块化组织详解

    Vuex 进阶之模块化组织详解

    上上篇:Vuex 入门 上一篇:Vuex 提升 自制vuex LOGO 前两篇讲解了一下 Vuex 的基本使用方法,可是在实际项目中那么写肯定是不合理的,如果组件太多,不可能把所有组件的数据都放到一个 store.js 中的,所以就需要模块化的组织 Vuex,首先看一下 项目结构. 项目结构 一.首先执行以下命令: vue init webpack-simple vuex-demo cd vuex-demo npm install npm install vuex -S npm run dev

  • Vuex模块化实现待办事项的状态管理

    Vuex模块化实现待办事项的状态管理

    前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了.比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸组件再告诉B.当组件比较多,要互相通讯的事情很多的话,爸组件要管他们那么多事,很累的.vuex正是为了解决这个问题,让多个子组件之间可以方便的通讯. 项目介绍 待办事项中的一个事件,它可能拥有几个状态,未完成.已完成.已取消或被删除等.这个事件需要在这多种状态之间切换,那么使用vuex来管理也是非常

  • nuxt框架中对vuex进行模块化设置的实现方法

    1.Nuxt里怎么使用vuex? Nuxt.js 内置引用了 vuex 模块,所以不需要额外安装. Nuxt.js 会尝试找到应用根目录下的 store 目录,如果该目录存在,它将做以下的事情: 1.1> 引用 vuex 模块 1.2> 将 vuex 模块 加到 vendors 构建配置中去 1.3> 设置 Vue 根实例的 store 配置项 Nuxt.js 支持两种使用 store 的方式: 普通方式: store/index.js 返回一个 Vuex.Store 实例 模块方式:

  • YII2框架中使用RBAC对模块，控制器，方法的权限控制及规则的使用示例

    本文实例讲述了YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用.分享给大家供大家参考,具体如下: 在使用YII2中自带的RBAC时,需要先配置config/web.php: return [ // ... 'components' => [ 'authManager' => [ 'class' => 'yii\rbac\DbManager', ], // ... ], ]; 如果你需要运行yii migrate来创建表,那么config/console.php也需要同

  • thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析

    本文实例讲述了thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法.分享给大家供大家参考,具体如下: tp5.1中引入了容器(Container)和门面(Facade)这两个新的类 官方文档已经给出了定义: 容器(Container)实现类的统一管理,确保对象实例的唯一性. 门面(Facade)为容器(Container)中的类提供了一个静态调用接口,相比于传统的静态方法调用, 带来了更好的可测试性和扩展性,你可以为任何的非静态类库定义一个facade类. 深入

  • Angular.JS中select下拉框设置value的方法

    Angular.JS中select下拉框设置value的方法

    前言 本文主要给大家介绍的是关于Angular.JS中select下拉框设置value的相关内容,非常出来供大家参考学习,下面来一起看看详细的介绍: 最近在系统中增加一个查询的筛选条件,通过下拉框选取,用的是Angular常见的ng-options 指令: <select id="selectDetectUnit" class="form-control" ng-model="detectUnits" ng-options="de

  • 详解ABP框架中的日志管理和设置管理的基本配置

    日志管理 Server side(服务器端) ASP.NET Boilerplate使用Castle Windsor's logging facility日志记录工具,并且可以使用不同的日志类库,比如:Log4Net, NLog, Serilog... 等等.对于所有的日志类库,Castle提供了一个通用的接口来实现,我们可以很方便的处理各种特殊的日志库,而且当业务需要的时候,很容易替换日志组件. 译者注释:Castle是什么:Castle是针对.NET平台的一个开源项目,从数据访问框架ORM到

  • nuxt框架中路由鉴权之Koa和Session的用法

    引子 博客的后台管理页面需要有登录系统,所以考虑做一下路由鉴权,实现方式也是 Nuxt 官网给出栗子来改写,顺便也将前后端路由给统一了. 路由拦截 前端方面主要通过利用 Nuxt 的中间件来做路由拦截,这里也是需要 Vuex 状态树来做. middleware middleware/auth.js export default function ({ store, redirect }) { if (!store.state.user) { return redirect('/login') }

  • Oracle中serveroutput参数一次设置永久保存方法

    serveroutput 是sqlplus的配置参数,而不是数据库的配置参数,修改并保存sqlplus的配置参数,那么每次打开sqlplus时就不用重新设置了. 设置方法如下: 1. sql> set serveroutput on 然后,在sqlplus中 2. sql> store set $ORACLE_HOME/sqlplus/admin/glogin.sql replace 完成保存设置. 可以通过如下查看设置效果: SQL> show serveroutput; server

  • Java的MyBatis+Spring框架中使用数据访问对象DAO模式的方法

    SqlSessionTemplate SqlSessionTemplate是MyBatis-Spring的核心.这个类负责管理MyBatis的SqlSession,调用MyBatis的SQL方法,翻译异常.SqlSessionTemplate是线程安全的,可以被多个DAO所共享使用. 当调用SQL方法时,包含从映射器getMapper()方法返回的方法,SqlSessionTemplate将会保证使用的SqlSession是和当前Spring的事务相关的.此外,它管理session的生命周期,包

  • 在Django框架中伪造捕捉到的URLconf值的方法

    比如说你有匹配某个模式的一堆视图,以及一个并不匹配这个模式但视图逻辑是一样的URL. 这种情况下,你可以通过向同一个视图传递额外URLconf参数来伪造URL值的捕捉. 例如,你可能有一个显示某一个特定日子的某些数据的应用,URL类似这样的: /mydata/jan/01/ /mydata/jan/02/ /mydata/jan/03/ # ... /mydata/dec/30/ /mydata/dec/31/ 这太简单了,你可以在一个URLconf中捕捉这些值,像这样(使用命名组的方法): u

  • Python的Bottle框架中返回静态文件和JSON对象的方法

    Python的Bottle框架中返回静态文件和JSON对象的方法

    代码如下: # -*- coding: utf-8 -*- #!/usr/bin/python # filename: todo.py # codedtime: 2014-8-28 20:50:44 import sqlite3 import bottle @bottle.route('/help3') def help(): return bottle.static_file('help.html', root='.') #静态文件 @bottle.route('/json:json#[0-9

随机推荐