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

1. nuxt里怎么使用vuex& # 63; 　　

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

　　

Nuxt。js会尝试找到应用根目录下的存储目录,如果该目录存在,它将做以下的事情:
　　1.1比;引用vuex模块
　　1.2比;将vuex模块加到供应商构建配置中去
　　1.3比;设置Vue根实例的商店配置项

　　

Nuxt。js支持两种使用商店的方式:
　　普通方式:存储/索引。js返回一个Vuex。商店实例
　　模块方式:存储目录下的每个。js文件会被转换成为状态树指定命名的子模块(当然,指数是根模块)
　　

　　

　　

2. nuxt中怎么对vuex进行模块化设置& # 63; 　　

2.1比;例如,设置index.js为根模块,child1.js与child2。js两个子模块
　　

　　

　　

2.2比;在存储/索引。js中不需要返回Vuex。商店实例,可以直接将状态,突变和行动暴露出来:
　　(以下为例:指数中存储商品总价,child1中存储单价,child2中存放数量)

　　 　　 　　出口const状态=()=祝辞({ 　　totalPrice: 0, 　　}); 　　出口const突变={ 　　totalPrice(状态){//总价//状态。totalPrice=state.num *状态。价格错误方式:使用子模块的状态,应该在变量名前加上文件名,如下 　　状态。totalPrice=state.child1.price * state.child2。num//正确方式 　　} 　　}; 　　 　　

子模块中同样直接将状态,突变和行动暴露出来:

　　

child1.js1 　　 　　 　　出口const状态=()=祝辞({//单价格:10日价 　　}); 　　出口const突变={ 　　getPrice(状态、价格){ 　　状态。价格=价格 　　} 　　}; 　　 　　

child2.js2 　　 　　 　　出口const状态=()=祝辞({ 　　num: 5 　　}); 　　出口const突变={ 　　getNum(状态,num){//数量 　　状态。num=num 　　} 　　}; 　　 　　

3。在vue文件中获取vuex的数据,调用突变中的方法修改数据 　　 　　 　　& lt; script> 　　出口默认{ 　　名称:“测试”, 　　数据(){ 　　返回{ 　　totalPrice: store.state美元。totalPrice,//取index.js(根模块)中的值 　　num: store.state.child2美元。num,//取子模块中的值 　　价格:$ store.state.child1。价格,//取子模块中的值 　　} 　　}, 　　} 　　& lt;/script> 　　 　　 　　 　　方法:{ 　　setTotalPrice () { 　　这个。store.commit美元(“totalPrice”) 　　}, 　　setNum () { 　　这个。store.commit美元(child2/getNum,参数)//使用子模块的突变中的方法。美元store.commit(“文件名/方法名”,参数) 　　}, 　　setPrice () { 　　这个。store.commit美元(child1/getPrice,参数)//使用子模块的突变中的方法 　　}, 　　}, 　　 　　

补充:使用子模块的行动:这一点。美元store.dispatch(“文件名/变量名”) 　　

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

　　

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

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