Vuex 通俗版教程告诉你Vuex怎么用
写在文前:
最近一直在用vue开发项目,写来写去就是那么些方法,对于简单的项目一些常用的vue方法足以解决,但是涉及到页面状态,权限判断等一些复杂的传值,vuex是必须的。对于vuex也运用一段时间,但是总觉得少了点什么,或者停留在会用的状态,理解不了精髓,当然了估计水平还没达到。所以一直想找个时间总结一下vuex。一来深入的了解,二来也方便以后查阅。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex); const store = new Vuex.Store({
state: { count: 0 },
mutations: {
increment (state) {
state.count++
}
}
})
以上就是一个最简单的Vuex,每一个Vuex应用就是一个store,在store中包含组件中的共享状态state和改变状态的方法(暂且称作方法)mutations。
vuex的核心是:state,getter,actions,mutations
1、state
state就是根据你项目的需求,自己定义的一个数据结构,里面可以放些通用的状态。
const state = {
openId:"",
storeId:"",
storeName:''
}
例如上面所写的,这些状态可以在各个页面通过vuex访问。如下:
this.$store.state.openId = "111"
之前我一直通过上面的方式来修改state里面的状态值,行,肯定能用,但是好像官方并不建议我们这样使用,而是建议使用mutations来改变state里面的值,因为不通过mutations改变state,状态不会被同步。至于mutations下面会讲到。
2、getter
getter怎么理解呢?通俗的理解可以认为是getter里的函数就是vuex里的计算属性,类似于computed函数。
const store = new Vuex.Store({
state: {
count: 0
},
getters: { // getters
countAdd: function (state) {
return state.count++
}
},
mutations: {
increment (state) {
state.count++
}
}
})
getter函数怎么用呢?如上vuex里定义了一个getter函数countAdd。我们可以在vue文件里的computed计算属性里引用,如下。
computed: {
...mapGetters{["countAdd"]}
show:function(){
alert("这个是测试页面")
}
}
这样我们可以直接在vue页面里取到countAdd的值{{countAdd}}即为1。可惜在我的项目里目前还没用到getter,可能写的少了,还没理解其中的要义。
3、mutations
官方定义:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
你不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法:
store.commit('increment')
也可以向store.commit传入第二参数,也就是mutation的payload:
mutaion: {
increment (state, n) {
state.count += n;
}
}
store.commit('increment', 10);
但是有时候,单个传入n可能并不能满足我们的业务需要,这时候我们可以选择传入一个payload对象:
mutation: {
increment (state, payload) {
state.totalPrice += payload.price + payload.count;
}
}
store.commit({
type: 'increment',
price: 10,
count: 8
})
不例外,mutations也有映射函数mapMutations,帮助我们简化代码,使用mapMutations辅助函数将组件中的methods映射为store.commit调用。
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations({
add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
})
}
}
这样我们可以在vue文件里直接调用函数:this.add()而不用this.$store.commit('increment')这样写了,简化了很多。
需要注意:Mutations必须是同步函数。
如果我们需要异步操作,Mutations就不能满足我们需求了,这时候我们就需要Actions了。
4、action
Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
官方demo如下:
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
如果我在vue页面里想用action,我们可以分发 Action,Action 通过 store.dispatch 方法触发:
store.dispatch('increment')
Actions 支持同样的载荷方式和对象方式进行分发:
// 以载荷形式分发
store.dispatch('incrementAsync', {
amount: 10
}) // 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})
我们也可以运用其映射函数:mapActions
methods:{
...mapActions{[
"add":"increment "//函数命名不相同
// "increment ":"increment "//函数命名相同
]}
}
调用:this.add()即可。相同时候调用:this.increment()
Modules
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
} const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
} const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
}) store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
总结起来:mutation 只管存,你给我(dispatch)我就存;action只管中间处理,处理完我就给你,你怎么存我不管(所有的改变state状态的都是mutation 来操作);Getter 我只管取,我不改的(类似计算属性)。
关于vuex目前也就了解这么多,在实际项目中vuex用什么,怎么用,还需要灵活改变,以后慢慢摸索吧。上面的示例很多都是vuex文档上的,总结起来还是需要多看文档,在实际项目中运用,才是最好的办法吧。
Vuex 通俗版教程告诉你Vuex怎么用的更多相关文章
- Vuex 通俗版教程
作者 Yeaseon 已关注 2017.03.16 16:44* 字数 1245 阅读 243评论 2喜欢 4 本文基本上是官方教程的盗版,用通俗易懂的文字讲解Vuex,也对原文内容有删减. 如果你对 ...
- Tensorflow 官方版教程中文版
2015年11月9日,Google发布人工智能系统TensorFlow并宣布开源,同日,极客学院组织在线TensorFlow中文文档翻译.一个月后,30章文档全部翻译校对完成,上线并提供电子书下载,该 ...
- [C#HttpHelper]类1.4正式版教程与升级报告
[C#HttpHelper]类1.4正式版教程与升级报告 导读 1.升级报告 2.HttpHelper1.4正式版下载 3.HttpHelper类使用方法, 4.最简单的Post与Get的写法 ...
- Vuex学习笔记(-)安装vuex
什么是Vuex? vuex是一个专门为vue.js应用程序开发的状态管理模式.即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. 安装vuex(前提是已经安装好vue-cli脚手 ...
- IDEA 2020.2安装破解版教程激活码注册码破解补丁 for Mac Windows Linux-中关村老大爷
IntelliJ Idea Ultimate 2020.2.x版软件最新安装破解版教程方法,本教程提供Idea Ultimate 2020.2版安装包,破解补丁,激活码,亲测100%完美破解激活,支持 ...
- vuex 基础:教程和说明
作者注:[2016.11 更新]这篇文章是基于一个非常旧的 vuex api 版本而写的,代码来自于2015年12月.但是,它仍能针对下面几个问题深入探讨: vuex 为什么重要 vuex 如何工作 ...
- Vuex的入门教程
前言 在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式,详细点击这篇文章查看. 但是如果是大型项目,很多时候都需要在子组件之间传递 ...
- Vue.js 系列教程 4:Vuex
这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理. 这不是一个完整的指南,而是基础知识的概述,所以你可以了解 Vue.js 以 ...
- vuex的简单教程
首先安装vuex npm install vuex --save 然后创建store.js文件里写 import Vue from 'vue' import Vuex from 'vuex' Vue. ...
随机推荐
- 前端HTML基础和head部分
一.SOCKET服务器与浏览器交互 CS模式 --> BS模式 CS模式逐渐向BS模式转移,底层都是socket客户端 浏览器给服务器发送请求 --> 服务器收到请求 --> 服务 ...
- apache配置https加密传输
环境:两台linux虚拟机和一台windows本机,一台充当要使用https传输的web服务器apache2.4.4,另一台CA服务器,window测试https配置. 1.CA服务器生成私有CA 1 ...
- JDBC课程4--使用PreparedStatement进行增删查改--封装进JDBCTools的功能中;模拟SQL注入 ; sql的date()传入参数值格式!
主要内容: /*SQL 的date()需要传入参数值: preparedStatement().setDate(new java.util.Date().getTime()); 熟悉了使用Prepar ...
- pygame无法自动补全解决方法
在pycharm中导入pygame 1. 如果出现 AttributeError: module 'pip' has no attribute 'main'问题 找到安装目录下 helpers/pa ...
- volatile相关知识
C中的volatile变量是什么? 回答: 的易失性的关键字是类型限定符防止从编译器optimization.According至C标准的对象,具有挥发性限定类型可以以实施方式未知进行修改或具有其他未 ...
- sql server 变量和select 赋值的联合使用demo
) ) select @cltcode=cltcode,@brand=brand from prosamplehd CREATE table #t ( cltcode ), brand ) ) INS ...
- 23 | MySQL是怎么保证数据不丢的?
今天这篇文章,我会继续和你介绍在业务高峰期临时提升性能的方法.从文章标题“MySQL是怎么保证数据不丢的?”,你就可以看出来,今天我和你介绍的方法,跟数据的可靠性有关. 在专栏前面文章和答疑篇中,我都 ...
- Docker 学习10 Docker的系统资源限制及验证
一.资源限制 二.内存限制 1.OOME 每一个进程都会有oom_adj(oom计算分数的权重)值,此值越大,oom_score(oom得分)越高,越容易被干掉,因此非常非常重要的容器化应用,一开始就 ...
- 013_Python3 条件控制
1.if #!/usr/bin/python3 var1 = 100 if var1: print ("1 - if 表达式条件为 true") print ( ...
- fdisk分区命令
fdisk是Linux系统中最常用的分区工具,通过这个命令也可以查看系统中所有可用的分区,但是这个命令只支持MBR的分区表(这句话应该只对某些系统,CentOS7-1810适用,Debian9.5和o ...