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


Posted in Javascript onSeptember 06, 2019
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 是根模块)

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

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

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

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

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://3water.com/article/169502.htm
https://3water.com/article/169504.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 #Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 #Javascript
微信小程序 搜索框组件代码实例
Sep 06 #Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 #Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 #Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 #jQuery
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 #Javascript
You might like
一个php作的文本留言本的例子(六)
2006/10/09 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
php实现搜索类封装示例
2016/03/31 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
JavaScript this 深入理解
2009/07/30 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
纯JS实现轮播图
2017/02/22 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
python梯度下降法的简单示例
2018/08/31 Python
详解python 中in 的 用法
2019/12/12 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
如何利用python进行时间序列分析
2020/08/04 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
2015年纪检监察工作总结
2015/04/08 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS