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中如何使用模块以各种方式来组织代码.我们将涵括内部和外部的模块,并且讨论他们在适合在何时使用和怎么使用.我们也会学习一些如何使用外部模块的高级技巧,并且解决一些当我们使用 ...
随机推荐
- Playbook剧本初识
目录 1.Playbook剧本初识 2.Playbook变量使用 3.Playbook变量注册 4.Playbook条件语句 5.Playbook循环语句 6.Playbook异常处理 7.Playb ...
- MATLAB实例:对称双随机矩阵
MATLAB实例:对称双随机矩阵 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 双随机矩阵(doubly stochastic matrix):元素属 ...
- NOI Linux vim配置文件
set nu " set mu set ruler color torte set tabstop=4 set shiftwidth=4 set autoindent set cindent ...
- 【ECNU71】一个游戏(水题)
点此看题面 大致题意: \(n\)种元素,有若干组将\(x\)元素转化为\(y\)元素的操作.问对于所有可能的元素拥有状况,改变转化操作的顺序,是否会影响转化后最终的结果. 水题 虽说是这么水的题,但 ...
- OpenvSwitch系列之五 网桥特性功能配置
Open vSwitch系列之一 Open vSwitch诞生 Open vSwitch系列之二 安装指定版本ovs Open vSwitch系列之三 ovs-vsctl命令使用 Open vSwit ...
- AntzOs系列导航
Antz操作系统 一个自制的操作系统,Antz .半图形化半命令式系统,同时嵌入Antzscript脚本语言(写在之后). 自制操作系统Antz(1)——Boot Sector 自制操作系统Antz( ...
- IT兄弟连 Java语法教程 流程控制语句 分支结构语句3
3 if-else if-else条件语句 if-else if-else的完整形式如下: if(判断条件A){ A语句块(判断条件A的值为true,执行) }else if(判断条件B){ B语句 ...
- copy-and-swap idiom
This answer is from https://stackoverflow.com/a/3279550/10133369 Overview Why do we need the copy-an ...
- wp.editor.initialize 配置案例
wp.editor.initialize ( 'EditorTextArea' , { tinymce: { wpautop: to true , theme: 'modern' , skin: 'l ...
- linux如何修改权限详解
前言 今日,同事问我,服务器上拷贝过来的tomcat,怎么执行不了./startup.sh.于是,我一想,那肯定是没有权限的问题了.于是使用chmod命令更改了权限后,就可以执行了.项目正常启动.我想 ...