(转)Vuex简单入门
今天试了一下Vuex,感觉跟Redux的实现思想类似。再此,简单地总结一下。
什么是Vuex
在Vue中,多组件的开发给我们带来了很多的方便,但同时当项目规模变大的时候,多个组件间的数据通信和状态管理就显得难以维护。而Vuex就此应运而生。将状态管理单独拎出来,应用统一的方式进行处理,在后期维护的过程中数据的修改和维护就变得简单而清晰了。Vuex采用和Redux类似的单向数据流的方式来管理数据。用户界面负责触发动作(Action)进而改变对应状态(State),从而反映到视图(View)上。如下图所示:
使用Vuex
安装:
npm install --save vuex
引入:
- import Vuex from 'vuex'
- import Vue from 'vue'
- Vue.use(Vuex)
Vuex的组成部分
完整的应用Vuex开发的应用结构应该是这样的:
下面针对比较核心的部分进行说明。
State
State负责存储整个应用的状态数据,一般需要在使用的时候在跟节点注入store
对象,后期就可以使用this.$store.state
直接获取状态
//store为实例化生成的
import store from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
这个store可以理解为一个容器,包含着应用中的state等。实例化生成store的过程是:
const mutations = {...};
const actions = {...};
const state = {...};
Vuex.Store({
state,
actions,
mutation
});
后续在组件中使用的过程中,如果想要获取对应的状态你就可以直接使用this.$store.state
获取,当然,也可以利用vuex
提供的mapState
辅助函数将state
映射到计算属性中去,如
- //我是组件
- import {mapState} from 'vuex'
- export default {
- computed: mapState({
- count: state => state.count
- })
- }
这样直接就可以在组件中直接使用了。
Mutations
Mutations
的中文意思是“变化”,利用它可以更改状态,本质就是用来处理数据的函数,其接收唯一参数值state
。store.commit(mutationName)
是用来触发一个mutation
的方法。需要记住的是,定义的mutation
必须是同步函数,否则devtool中的数据将可能出现问题,使状态改变变得难以跟踪。
- const mutations = {
- mutationName(state) {
- //在这里改变state中的数据
- }
- }
在组件中触发:
- //我是一个组件
- export default {
- methods: {
- handleClick() {
- this.$store.commit('mutationName')
- }
- }
- }
或者使用辅助函数mapMutations
直接将触发函数映射到methods
上,这样就能在元素事件绑定上直接使用了。如:
import {mapMutations} from 'vuex'
//我是一个组件
export default {
methods: mapMutations([
'mutationName'
])
}
Actions
Actions
也可以用于改变状态,不过是通过触发mutation
实现的,重要的是可以包含异步操作。其辅助函数是mapActions
与mapMutations
类似,也是绑定在组件的methods
上的。如果选择直接触发的话,使用this.$store.dispatch(actionName)
方法。
- //定义Actions
- const actions = {
- actionName({ commit }) {
- //dosomething
- commit('mutationName')
- }
- }
在组件中使用
import {mapActions} from 'vuex'
//我是一个组件
export default {
methods: mapActions([
'actionName',
])
}
Getters
有些状态需要做二次处理,就可以使用getters
。通过this.$store.getters.valueName
对派生出来的状态进行访问。或者直接使用辅助函数mapGetters
将其映射到本地计算属性中去。
- const getters = {
- strLength: state => state.aString.length
- }
- //上面的代码根据aString状态派生出了一个strLength状态
在组件中使用
import {mapGetters} from 'vuex'
//我是一个组件
export default {
computed: mapGetters([
'strLength'
])
}
Plugins
插件就是一个钩子函数,在初始化store
的时候引入即可。比较常用的是内置的logger插件,用于作为调试使用。
- import createLogger from 'vuex/dist/logger'
- const store = Vuex.Store({
- ...
- plugins: [createLogger()]
- })
最后,还有一些高级用法,如严格模式,测试等可能使用频率不会特别高。有需要的时候查官方文档就可以了。总的来说,Vuex还是相对比较简单的,特别是如果之前有学过Flux,Redux之类的话,上手起来更加容易。
参考文档
http://vuex.vuejs.org/zh-cn/index.html
(转)Vuex简单入门的更多相关文章
- vue2 vuex 简单入门基础
1.vuex中文文档 https://vuex.vuejs.org/zh-cn/api.html 2.我理解vuex 应用观察者模式 设置了全局的状态 state 状态变化即通知更新全局state 3 ...
- Vuex的入门教程
前言 在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式,详细点击这篇文章查看. 但是如果是大型项目,很多时候都需要在子组件之间传递 ...
- Vue的简单入门
Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...
- Vuex 2 入门与提高。
从计数器开始 让我们从一个简单的计数器,开始进入Vuex 的世界: 计数器应用的数据模型很简单:使用一个counter属性来表示计数器的 当前值就够了. 在Vue实例的created钩子 中,应用启动 ...
- 用IntelliJ IDEA创建Gradle项目简单入门
Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...
- [原创]MYSQL的简单入门
MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...
- Okio 1.9简单入门
Okio 1.9简单入门 Okio库是由square公司开发的,补充了java.io和java.nio的不足,更加方便,快速的访问.存储和处理你的数据.而OkHttp的底层也使用该库作为支持. 该库极 ...
- emacs最简单入门,只要10分钟
macs最简单入门,只要10分钟 windwiny @2013 无聊的时候又看到鼓吹emacs的文章,以前也有几次想尝试,结果都是玩不到10分钟就退出删除了. 这次硬着头皮,打开几篇文章都看完 ...
- 【java开发系列】—— spring简单入门示例
1 JDK安装 2 Struts2简单入门示例 前言 作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控制反转 ...
随机推荐
- JavaSE 学习笔记之反射技术(二十四)
反射技术:其实就是动态加载一个指定的类,并获取该类中的所有的内容.而且将字节码文件封装成对象,并将字节码文件中的内容都封装成对象,这样便于操作这些成员.简单说:反射技术可以对一个类进行解剖. 反射的好 ...
- type="timestamp"与type="date"区别
type="timestamp"-----数据库中保存的时间为年月日时分秒 与type="date"---------数据库中保存的时间为年月日
- Fast Matrix Calculation 矩阵快速幂
One day, Alice and Bob felt bored again, Bob knows Alice is a girl who loves math and is just learni ...
- J - Invitation Cards 最短路
In the age of television, not many people attend theater performances. Antique Comedians of Malidine ...
- mysql中有关树的函数
用mysql客户端在库中建立函数queryOrgChildren(查找子节点)和queryOrgLevel(查看当前节点在树中的级别):DROP FUNCTION IF EXISTS `queryOr ...
- 迭代器概念与traits编程技法
//迭代器是一种smart pointer template<typename T> class ListItem { public: T value() const { return _ ...
- 每日五题(jsp)
1.forward 和 redirect 的差别 答: 1.从地址栏显示来说 forward是server请求资源,server直接訪问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容 ...
- Behavioral模式之Interpreter模式
1.意图 给定一个语言,定义它的文法的一种表示.并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 2.别名 无 3.动机 假设一种特定类型的问题发生的频率足够高,那么可能就值得将该问题的各种 ...
- 精确计算java中float和double的精度
[本文相关的代码放在github上.地址为:https://github.com/VigourJiang/StructuredFloat] Java中double类型的格式基本遵循IEEE 754标准 ...
- C++学习之可变参数的函数与模板
所谓可变参数指的是函数的参数个数可变,参数类型不定的函数.为了编写能处理不同数量实参的函数,C++11提供了两种主要的方法:如果所有的实参类型相同,可以传递一个名为initializer_list的标 ...