02vuex-modules
01===>
module的理解:将一个大的系统进行拆分 拆分成若干个细的模块
给个模块都有自己的 state mutations 等属性
这样可以在自己的小模块中进行修改 方便维护 module的简单使用
(1)创建main.js(首页)在store.js同级中 (2)store.js中引入 (3)modules的形式注册
在store.js中写
{
// Vuex 仓库文件(入口)
import Vue from 'vue' import Vuex from 'vuex' //全局注册Vue.use(Vuex) // 引入子模块(add)
import shopcar from "./ShopCar"
import main from "./main" // 创建一个状态厂库 并且将它暴露出去 export default
const store=new Vuex.Store({
modules:{
// key:(模块名) value(对应模块的配置)
shopcar, //它相当于把shopcar.js暴露的那个对象放置在这里
main
}
}) // 取各个模块的值
console.log(store.state.shopcar.name) //这样可以拿到可拿到 购物出的的name值为 “我的值是购物车”
console.log(store) //下面为输出的值
/*
state: Object
main: Object
shopcar: Object
*/
export default store
} 然后创建main.js(首页)
{
export default{
state: {
val: "主文件需要的值",
name: "我的值是主文件"
},
mutations:{ },
}
}
02====》如何在商家页面Merchant.vue 获取到 modules模块中--shangjia.js中state的数据 ps===>在main.js文件中 key值是不能够改名字的 value是引入进来的那个文件名
key:vaulue相同的话可以简写 main.js
{
//引入store实例
import storeaa from "./store/store"; new Vue({
router,
store: storeaa, //这里是key:value的形式 这里是不能够改变的哦 key 的固定的值是store value的值可以跟引入的实例对象一致即可
// 这这里注册store后,全局可以共享 store了
render: h => h(App)
}).$mount("#app"); } store.js
{
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 引入子模块 (千万别忘记了)
import shopcar from "./ShopCar"
import main from "./main"
import shangjia from './shangjia' // 创建一个状态厂库 并且将它暴露出去 export default
const store=new Vuex.Store({
modules:{
// key:(模块名) value(对应模块的配置)
shopcar, //它相当于把shopcar.js暴露的那个对象放置在这里
main,
shangjia
} })
export default store
} shangjia.js modules中管理商家模块的数据
{
export default {
state:{
val:"我是商家页面数据",
name:"哈哈哈商家"
}
}
} Merchant.vue获取shangjia.js中state的数据
{
<template>
<div>
<p>{{ test }}</p>
</div>
</template> export default {
data(){
return{
test:"",
}
}, created() {
this.test=this.$store.state.shangjia.val;
},
} }
03===》 利用computed:{}计算属性提高性能 例2不变
利用computed只要母体数据不发生改变 它就不会发生改变 添加 Merchant.vue中
{
将值渲染出来
<h2>为了提升性能 {{test1}}</h2> computed: {
test1() {
return this.$store.state.shangjia.name; //返回 “哈哈哈商家”
}
}, }
04===>将所有的数据放在store.js的data中
两个页面的代码一模一样 A页面点击加1 B页面数字同样发生改变 ps===>在利用modules模块来管理数据的时候 你需要在store.js 引入相应的子模块 如例2
如果将所有的数据 都放在store.js 的data中饭就不需要 引入相应的子模块 ps===> 只要你去修改state中的值 你就考虑写mutations A.vue页面 B.vue页面
{
<template>
<div>
<button @click="clickDec">-</button>
<span> {{ num }} </span>
<button @click="addNum">+</button>
</div>
</template> export default {
data() {
return {
test: ""
};
},
methods:{
addNum(){
// 提交一个mutations ,改变state中的值 相调用mutations中的addNum函数
this.$store.commit("addNum")
}, clickDec(){
this.$store.commit("clickDec")
}
}, computed:{
num(){
return this.$store.state.num
}
},
};
} store.js
{
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 创建一个状态厂库 并且将它暴露出去 export default
const store=new Vuex.Store({
state(){
return{
test:"我输测试数据",
num:0
}
}, mutations:{
addNum(state){
state.num++;
},
clickDec(state) {
state.num--;
},
} })
export default store }
5====》对例4进行优化 this.$store.commit("chang",1) 传参 判断出入的值正数还是负数 负数不能小于0 A页面 B页面 简化了代码
{
<button @click="clickDec">-</button>
<span> {{ num }} </span>
<button @click="addNum">+</button> methods:{
addNum(){
// 提交一个mutations ,改变state中的值 用了第一种方式
this.$store.commit("chang",1)
}, clickDec(){ //如果小于0 不执行改函数
if(this.$store.state.num==0){ //不能将这一条语句放在 最后 将没有意义
return;
}
this.$store.commit("chang",-1)
// console.log(this.$store.state.num)
}
},
} store.js 简化了
{
mutations: {
chang(state, zhi) {
state.num += zhi;
}
}
}
02vuex-modules的更多相关文章
- Play modules
A Play application can be assembled from several application modules. This allows you to reuse appli ...
- YII的Modules模块化
转载来源: http://blog.csdn.net/mengxiangbaidu/article/details/7041296 http://blog.csdn.net/colzer/articl ...
- 在Angular1.X中使用CSS Modules
在Angular1.5中,增加了一个Component方法,并且定义了组件的若干生命周期hook,在代码规范中也是推崇组件化开发,但是很遗憾的是,CSS模块化组件化的问题并没有得到解决,大部分项目的打 ...
- 如何在Mac系统里面更新 Ansible 的 Extra Modules
最近遇到一个问题 seport is not a legal parameter in an Ansible task or handler 原因是我本地 Ansible 的 Extra Module ...
- Tomcat version 6.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 Web modules
在eclipse里面配置tomcat时候遇到的问题: Tomcat version 6.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 Web mo ...
- 安装ESXi5.5遇到Relocating modules and starting up the kernel的处理
在一些Dell较旧的服务器上安装ESXi 5.x时, 会遇到卡在Relocating modules and starting up the kernel过不去的问题. 比如我装的这台CS24VSS. ...
- PHPCMS \phpcms\modules\member\index.php 用户登陆SQL注入漏洞分析
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述2. 漏洞触发条件 0x1: POC http://localhost/p ...
- PHPCMS \phpsso_server\phpcms\modules\phpsso\index.php、\api\get_menu.php Authkey Leakage
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 安装phpcms的时候会强制安装它的通行证 Relevant Link: ...
- ecshop /includes/modules/payment/alipay.php SQL Injection Vul
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 ECSHOP支付插件存在SQL注入漏洞,此漏洞存在于/includes/ ...
- TypeScript Modules(模块)
本文概述了TypeScript中如何使用模块以各种方式来组织代码.我们将涵括内部和外部的模块,并且讨论他们在适合在何时使用和怎么使用.我们也会学习一些如何使用外部模块的高级技巧,并且解决一些当我们使用 ...
随机推荐
- SSH的本地、远程、动态端口转发实验笔记
SSH端口转发 SSH 会自动加密和解密所有 SSH 客户端与服务端之间的网络数据.但是,SSH 还能够将其他 TCP 端口的网络数据通过 SSH 链接来转发,并且自动提供了相应的加密及解密服务.这一 ...
- Linux开发环境搭建三 使用mount -t cifs 挂载windows共享目录方法与问题解决
转载链接:https://blog.csdn.net/fuyuande/article/details/82915800 嵌入式开发通常是在linux环境下编译,windows下开发,这就需要在lin ...
- Cent OS6.5——网络配置
1.已安装centos 系统,打开虚拟机,并开机进入centos系统 2.进行网络配置,必须先确认以下几个点: 2-1.网络适配器模式是否为NAT模式,点击虚拟机,选择设置 ——选择网络适配器,NAT ...
- day91_11_13Local与偏函数
一.local 在线程的处理中,常常遇到这样的问题.当一系列线程遇到io操作的时候,就会执行其他线程,这时候就会出现数据冲突,发生数据方面的问题: from threading import Thre ...
- SQL查询--内连接、外连接、自连接查询
先创建2个表:学生表和教师表 1.内连接: 在每个表中找出符合条件的共有记录.[x inner join y on...] 第一种写法:只用where SELECT t.TEACHER_NAME, ...
- python3的ExecJS安装使用
参考官方文档安装 pip3 install PyExecJS 代码编写 import execjs ctx = execjs.compile(""" function a ...
- [ Python入门教程 ] Python字典数据类型及基本操作
字典是Python中重要的数据类型,字典是由"键-值"对组成的集合,"键-值"对之间用逗号隔开,包含在一对花括号中.字典中的"值"通过&qu ...
- MacOS命令行打包+签名+公证+生成dmg文件
关于dmg文件是什么,和为什么要进行公证? 简单说下,dmg文件就是一个可直接在mac上安装的安装包,我自己的理解是就像windows上的exe安装包一样: 公证是将app传到苹果商店去做认证,如果不 ...
- 基于TCP协议的socket套接字编程
目录 一.什么是Scoket 二.套接字发展史及分类 2.1 基于文件类型的套接字家族 2.2 基于网络类型的套接字家族 三.套接字工作流程 3.1 服务端套接字函数 3.2 客户端套接字函数 3.3 ...
- swoole进程间如何通信
Swoole进程间通信的方式 管道pipe 管道用于进程之间的数据交互,Linux系统本身提供了pipe函数用于创建一个半双工通信管道.半双工的通信方式中数据只能单向流动(一端只读一端只写),只能在具 ...