Vuex总结
Vuex官网链接:https://vuex.vuejs.org/zh-cn/strict.html
Vuex
- 是一个专为 Vue.js 应用程序开发的状态管理模式。
- 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
- Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
- 帮助我们管理新的共享状态
- 适合于开发大型单页应用
1.开始安装
在Vue-cli架构中 nmp i vuex --save
在src下新建目录vuex/store.js
2.store.js配置
import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用 var state={ //
count:1
};
var mutations={
add(state,n){
state.count+=n
},
reduce(state){
state.count--
}
}
export default new Vuex.Store({//暴露出口
state,mutations
})
3.五大方法
1.state
用于数据管理,可以通过computed直接返出,也可以组件调用,也可以借助mapState()管理
<template>
<div>
<h1>方法一:全局引入{{$store.state.count}}</h1>
<h1>方法二:computed引入{{count}}</h1>
<h1>方法三:mapState引入{{count1}}</h1>
</div> </template>
<script>
import store from"@/vuex/store";
import {mapState} from"vuex"
export default {
computed:{
count:function(){return this.$store.state.count},
...mapState(['count1'])
},
store
}
</script>
import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用 var state={ //
count:1,
count1:2
};
export default new Vuex.Store({//暴露出口
state
})
2. getter
主要用于数据的过滤,直接通过computed调用,也可以mapGetters()
<template>
<div>
<h1>mapGetters引入{{count_get}}</h1>
</div>
</template>
<script>
import store from"@/vuex/store";
import {mapState,mapGetters} from"vuex"
export default {
computed:{
...mapGetters(['count_get'])
},
store
}
</script>
import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用
var state={ //
count:1,
};
var getters={
count_get(state){
return state.count+1
}
};
export default new Vuex.Store({//暴露出口
state,getters
})
3.mutations
主要用于储存公共方法
直接mapMutations()调用或者commit提交以及传值
<template>
<div>
<h1>count的值{{$store.state.count}}</h1>
<h3>mapMutations方法: <input type="button" value="按钮1" @click=add></h3>
<h3>$store.commit()方法: <input type="button" value="按钮2" @click="$store.commit('reduce')"></h3>
<h3>传参方法: <input type="button" value="+10" @click="$store.commit('xx',10)"></h3>
</div>
</template>
<script>
import store from"@/vuex/store";
import {mapState,mapMutations} from"vuex"
export default {
methods:mapMutations(['add']),
store
}
</script>
import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用
var state={ //
count:1,
};
var mutations={
add(state){
return state.count++
},
reduce(state){
return state.count--
},
xx(state,n){
return state.count+=n
}
}
export default new Vuex.Store({//暴露出口
state,mutations
})
4.actions用于异步方法
<template>
<div>
<h1>count的值{{$store.state.count}}</h1>
<h1>mapActions的methods引入: <input type="button" value="+5 3s -1" @click="add1"></h1>
</div>
</template>
<script>
import store from"@/vuex/store";
import {mapState,mapMutations,mapActions} from"vuex"
export default {
methods:mapActions(['add1']),store
}
</script>
import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用
var state={ //
count:1,
};
var mutations={
add(state){
state.count+=5;
return state.count
}
};
var actions={
add1:function(context){
context.commit('add');
setTimeout(()=>{
state.count--
},2000)
}
}
export default new Vuex.Store({//暴露出口
state,mutations,actions
})
5.modules
对于大型项目,进行模块化分组管理,store.js可以引入多个类似于store.js的文件,在总文件进行模块化状态管理
<template>
<div>
<h1>count的值{{$store.state.a.count}}</h1>
<h1>mapActions的methods引入: <input type="button" value="+5 3s -1" @click="add1"></h1>
</div>
</template>
<script>
import store from"@/vuex/store";
import {mapState,mapMutations,mapActions} from"vuex"
export default {
methods:mapActions(['add1']),store
}
</script>
import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用
var state={ //
count:1,
};
var mutations={
add(state){
state.count+=5;
return state.count
}
};
var actions={
add1:function(context){
context.commit('add');
setTimeout(()=>{
state.count--
},2000)
}
}
var moduleA={
state,mutations,actions
}
export default new Vuex.Store({//暴露出口
modules:{a:moduleA}
})
Vuex总结的更多相关文章
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- vuex复习方案
这次复习vuex,发现官方vuex2.0的文档写得太简略了,有些看不懂了.然后看了看1.0的文档,感觉很不错.那以后需要复习的话,还是先看1.0的文档吧.
- vuex 初体验
vuex是vue的状态管理工具,vue进阶从es6和npm开始,es6推荐阮一峰大神的教程. vuex学习从官方文档和一个记忆小游戏开始.本着兴趣为先的原则,我先去试玩了一把-->. Vuex ...
- vuex(1.0版本写法)
Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构. 官方文档:http://vuex.vuejs.org/zh-cn/ 2.0和1.0都能在此找到 每一个 Vuex 应用的核心就 ...
- 关于Vue vuex vux 文档
01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex ----->>状态管理模块儿<<------- https://vuex.vue ...
- vuex
英文:(Introduction)中文:https://github.com/vuejs/vuex/issues/176(贡献者努力中)
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- Vue2.X的状态管理vuex记录
记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪) vue Method -- ...
- 在vue1.0遇到vuex和v-model的坑
事情是这样的,在开发项目的过程中我使用了vuex并且在store中定义了一个保存用户信息的对象 userInfo : { 'nickName' : '', // 昵称 'password' :'', ...
- vuex 笔记
Vuex 笔记 一个简单的状态管理 单一数据源: const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const ...
随机推荐
- python学习(十四)正则表达式
原文链接 ## 什么是正则表达式`正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑 ...
- libxml移植到android
libxml是C语言写的xml解析库,是我们开发可移植程序的首选,下面讲述将其移植到android的步骤 1.下载已经配置好的源代码包android_libxml2.rar http://pan.ba ...
- Vue DatePicker和不可用
input控件可以直接设置disabled为不可用状态: DatePicker要想不可编辑,设置readonly属性即可 <DatePicker type="date" v- ...
- POJ 1113 Wall 凸包 裸
LINK 题意:给出一个简单几何,问与其边距离长为L的几何图形的周长. 思路:求一个几何图形的最小外接几何,就是求凸包,距离为L相当于再多增加上一个圆的周长(因为只有四个角).看了黑书使用graham ...
- c# 重载运算符(ovveride operator)踩坑记,关于null比对
场景描述: 需要比对两个版本的对应对象是否完全一致(每个属性值一致),不一致的导出报表颜色标识,以便提醒后续使用报表人员. 实现思路: 对象重载ToString方法,另实现一比对基类(为了通用)重载= ...
- (function($){})(jQuery)---Javascript的神级特性:闭包
function($){}实际上是匿名函数 这就定义了一个匿名函数,参数为arg function(arg){ //code } 而调用函数 时,是在函数后面写上括号和实参的,由于操作符的优先级,函数 ...
- Spring boot初始
1 创建pom.xml parent:org.springframework.boot 包含启动的依赖 添加依赖,如 spring-boot-starter-web mvn dependency:t ...
- laravel中form表单,ajax传值没反应
laravel中form表单,ajax传值没反应时,可能是令牌有问题. form中添加: {{csrf_token()}} ajax中添加: data: {'page': page, '_token' ...
- ueditor和thinkphp框架整合修改版
基于tp官网上的一篇文章修改的 因为tp中所有目录其实都是性对于入口文件的 在原来的基础上略做修改后 已经做到 无论项目放在www下的任何位置 图片在编辑器中回填后都能正常显示! http://fi ...
- java基础6 面向对象的详解
本文知识点(目录): 1.1.万物皆对象 1.2.面向对象的概述 1.3.面向对象(java语言)与面向过程(C语言)对比 1.4.面向过程 1.5.对象 1.6.面向对 ...