Vuex 是一个专门为 Vue.js 应该程序开发的状态管理模式,它类似于 Redux 应用于 React 项目中,他们都是一种 Flux 架构。相比 Redux,Vuex 更简洁,学习成本更低。希望通过本文帮助还没使用 Vuex 的同学快速上手。

注:本文针对 Vuex 2.0 的语法,目前通过 npm 默认下载的版本为 1.0+ ,想引入 2.0 版本可以通过 script 标签引入。

<script src="https://unpkg.com/vuex@2.0.0"></script>

习惯使用 ES6 中 import 方法的可以暂时通过解构赋值的方式引入 Vuex 中的方法。

import { mapState, mapGetters } from 'Vuex';
//替换为:
let { mapState, mapGetters } = Vuex;

Vuex 的核心内容主要就是 State、Getters、Mutations、Actions 这四部分,也非常好理解。

State

首先看如何申明一个 store

import Vue from 'Vue';
import Vuex from 'Vuex'; Vue.use(Vuex); let store = new Vuex.Store({
state: {
stateA: 'a',
stateB: 'b',
stateC: 'c'
}
}); console.log(store.state.stateA); // a

在 store 中的 state 对象,可以理解为 Vue 实例中的 data 对象,它用来保存最基本的数据。

在 Vue 中获取 store 中的状态

let app = new Vue({
   el: '#demo',
template: `<h1>{{myState}}</h1>`,
computed: {
myState() {
return store.state.stateA;
}
}
});

最简单的方式就是通过 Vue 中的计算属性(computed) 来将 store 中的状态映射为 Vue 的数据。但是当数据多时这种方法明显效率过低,所以 Vuex 中提供了 mapState 方法用于批量映射 store 中的状态。

首先必须在 Vue 中注册 store 选项,这样整个 store 就从根节点注册到 Vue 下的每一个子组件里了。

import { mapState } from 'Vuex';

let app = new Vue({
el: '#demo',
store,
data: {
local: 'L'
},
computed: mapState({
stateA: state => state.stateA,
stateB: 'stateB',
stateC(state) {
return state.stateC + this.local;
}
})
});

上例中,a. 可以通过 ES6 中的箭头函数进行数据的映射,b. 当计算属性的名称与 state 的属性名一致时可能直接通过字符串赋值,c. 当需要引用上下文中的 data 属性实,只能通过常规函数来使 this 生效。

如果所有计算属性的名称都与 state 一致,可以在 mapState 中以数组的方式进行映射。如果 Vue 中已经存在计算属性,可以通过 ES6 的展开操作符 (...) 进行组合。

let app = new Vue({
el: '#demo',
store,
computed: {
local() {
return 'Local';
},
...mapState(['stateA', 'stateB', 'stateC'])
}
});

Getters

当需要对 store 中的数据进行处理,或者需要对处理后的数据进行复用,就可以使用 Getters 来处理,Getters 也可以理解为 Vue 中的计算属性 (computed)。

let store = new Vuex.Store({
state: {
nowDate: new Date()
},
getters: {
dateFormat(state, getters) {
let date = state.nowDate;
return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} / ${date.getHours()}:${date.getMinutes()}`;
}
}
}); console.log('The time is now:', store.getters.dateFormat); // The time is now: 2017-2-10 / 17:28

getters 接收两个参数,1. state、2. getters 本身,可以引用其他 getters。与 mapState 类似,Getters 也拥有 mapGetters 方法,用于批量映射。

let { mapGetters } from 'Vuex';

let comonent = {
computed: {
...mapGetters([
'nowDate'
])
}
};

Mutations

在 Vue 中,data 值是可以直接被更改的。但是在 Vuex 中,不能直接对 state 进行操作,唯一的方法就是提交 mutation。mutation 可以理解为 Vue 中的 method 事件,只不过调用 mutation 需要特别的方法。

let store = new Vuex.Store({
state: {
count: 0
},
mutations: {
addCount(state) {
state.count ++;
}
}
}); store.commit('addCount'); console.log(store.state.count); //

每一个 mutation 都有一个字符串的事件类型和一个回调函数。通常在回调函数中进行状态更改,通过 store.commit 触发事件。

传参

// ...
mutations: {
addCount(state, n) {
state.count += n;
}
} store.commit('addCount', 10);

这种方式有一个问题,一旦参数多了,就必须保证传入的顺序不能出错,可读性也很低。所以通常将参数以对象的形式传入,同时 mutaion 的事件类型字符串也可以使用对象的形式传入。

// ...
mutations: {
addCount(state, params) {
state.count += params.num;
}
} store.commit('addCount', {
num: 10
}); store.commit({
type: 'addCount',
num: 10
});

这里有一个规则需要遵守,在 mutation 中更改 state 应该以新对象替换老对象,不要在直接原对象上直接修改。*熟悉 React 的朋友们应该知道,在使用 setState 更新状态时也是同样的规则。

通过 ES6 的展开操作符可以很容易的完成。

state.obj = { ...state.obj, newState: 123 };

在 Vue 组件中提交 mutaion

this.$store.commit('xxx');

在组件中可以通过上述方法提交 commit,不过 Vuex 提供了 mapMutations 方法用于将 mutation 映射到组件中的 method 中。与 mapState、mapGetters 相似,这里就不再赘述了。

import { mapMutations } from 'vuex'

const component = {
// ...
methods: {
...mapMutations([
'addCount' // 映射 this.addCount() 为 this.$store.commit('addCount')
]),
...mapMutations({
add: 'addCount' // 映射 this.add() 为 this.$store.commit('addCount')
})
}

mutation 必须是同步函数

我们先试着写一个异步的 mutation ,看看会发生什么。

// ...
mutations: {
asyncAdd(state) {
setTimeout(() => {
state.count ++;
}, 2000);
}
} store.commit('asyncAdd');

经测试,在 mutaion 里进行异步操作也是会生效的,2秒之后 state.count 确实发生改变。

那为什么还要强调 mutation 必须是同步的呢?因为在触发 commit 之后,回调函数还没有被调用,所以这次 mutation 的修改也是无法被调试工具所记录的。

如何对 state 进行异步操作呢,就要使用下面的 Action 了。

Actions

Action 类似于 mutation,不同在于:

1. Action 不直接更改状态,而是提交 mutation

2. Action 可以包含任何异步操作

const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
addCount(state) {
state.count ++;
}
},
actions: {
asyncAdd(context) {
setTimeout(() => {
context.commit('addCount');
}, 2000);
}
}
})

Action 中的回调函数会接收一个上下文 context 对象,它包含了当前 store 中所有属性和方法,但其不是 store 本身。你可以通过 context.commit 来提交 mutation,也可以通过 context.state 与 context.getters 来获取 state 和 getters。

当需要多次调用 commit 时,可以使用 ES6 的语法对传入的参数进行解构。

// ...
actions: {
asyncAdd({ commit }) {
commit('addCount');
}

分发 Action 与传参

Action 是通过 store.dispatch 方法来触发,传参方式与 store.commit 类似。

store.dispatch('asyncAdd');

store.dispatch('asyncAdd', {
num: 10
}); store.dispatch({
type: 'asyncAdd',
num: 10
});

在 Vue 组件中分发 Action

this.$store.dispatch('xxx');

可以使用上述方式,同时 Vuex 中也提供了 mapActions 方法用于批量映射于组件中的 methods 中,与 mapMutations 类似。

import { mapActions } from 'vuex'

const component = {
// ...
methods: {
...mapActions([
'asyncAdd' // 映射 this.asyncAdd() 为 this.$store.dispatch('asyncAdd')
]),
...mapActions({
add: 'asyncAdd' // 映射 this.add() 为 this.$store.dispatch('asyncAdd')
})
}
}

组合 Actions

既然 Action 是异步行为,那我们可以使用 ES6 中的 Promise 对象进行组合。

const store = {
actions: {
asyncActionA({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('asyncAdd');
resolve();
}, 2000);
});
},
asyncActionB({ dispatch }, params) {
return dispatch('asyncActionA').then(() => {
console.log('Action complete at: ', params.date);
});
}
}
} store.dispatch('asyncActionB', {
date: (new Date()).getTime() // 2秒后打印 Action complete at: xxxxxxxx (当前时间毫秒数)
});

本文介绍了 Vuex 的核心知识,在下一篇博文中我介绍 Vuex 如何进行模块化以及工程目录结构创建。

即使项目不大,但当数据交互较多,尤其是跨组件的事件触发较多时,单纯的使用 Vue 进行项目开发就显得有些吃力。使用 Vuex 可以帮我们很好的管理数据模型,希望已经迷上使用 Vue 进行开发的同学能很好的利用起来。

感谢你的浏览,希望能有所帮助。

Vuex核心知识(2.0)的更多相关文章

  1. Vuex核心知识(转)

    转:http://www.cnblogs.com/ghost-xyx/p/6380689.html Vuex 是一个专门为 Vue.js 应该程序开发的状态管理模式,它类似于 Redux 应用于 Re ...

  2. 前端知识扫盲-VUE知识篇一(VUE核心知识)

    最近对整个前端的知识做了一次复盘,总结了一些知识点,分享给大家有助于加深印象. 想要更加理解透彻的同学,还需要大家自己去查阅资料或者翻看源码.后面会陆续的更新一些相关注知识点的文章. 文章只提出问题, ...

  3. Linux(1)- 服务器核心知识、Linux入门、VMware与centeos安装、远程连接linux、linux基本命令使用

    一.服务器核心知识 1.电脑和电脑的硬件组成 现在的人们几乎无时无刻不在使用着电脑!不管是桌上型电脑(桌机).笔记型电脑(笔电).平板电脑,还是智慧型手机等等,这些东西都算是电脑.虽然接触这么多,但是 ...

  4. 开发技术--Python核心知识A

    开发|Python核心知识A A篇,主要介绍Python基础中列表,元祖,字典,集合,字符串,I/O,条件与循环,异常处理的底层知识与使用的注意事项. 希望大家对于Python会有新的收获,本篇不同于 ...

  5. [转帖]java注解核心知识总结

    java注解核心知识总结 2019-11-01 20:39:50 从事Java 阅读数 2  收藏 文章标签: java注解总结程序员 更多 分类专栏: java 注解   版权声明:本文为博主原创文 ...

  6. Java英语面试题(核心知识篇)

    Java英语面试题(核心知识篇) Question: What is transient variable?Answer: Transient variable can't be serialize. ...

  7. 【VUE】8.VUEX核心概念

    1. Vuex核心概念主要如下 state : 存储共享数据 mutation: 变更store中的数据,方法,不能异步操作 action: 异步操作,通过触发mutation变更数据 getter: ...

  8. c++11-17 模板核心知识(十一)—— 编写泛型库需要的基本技术

    Callables 函数对象 Function Objects 处理成员函数及额外的参数 std::invoke<>() 统一包装 泛型库的其他基本技术 Type Traits std:: ...

  9. c++11-17 模板核心知识(十四)—— 解析模板之依赖型模板名称(.template/->template/::template)

    tokenization与parsing 解析模板之类型的依赖名称 Dependent Names of Templates Example One Example Two Example Three ...

随机推荐

  1. VS2010打开旧版本MFC工程无对话框

    解决方案: 左侧有个"资源视图",打开,里面就能找得到对话框,如果没有资源视图,就在菜单的视图选项里打开资源视图!

  2. 巧用HTML5给按钮背景设计不同的动画

      如何巧用HTML5设计按钮背景不同动画特效,在该特效中,当鼠标滑过按钮时,使用CSS3   animation 来动画   background-size  和  background-posit ...

  3. 51驱动LCD12864

    LCD12864与LCD1602最大的区别在于LCD12864可以显示汉字,同时也可以拿来画图;当然,作为图形显示不推荐lcd12864,推荐NOKIA5110 12864引脚基本和1602的引脚吻合 ...

  4. IOS开发中如何判断程序第一次启动(根据判断结果决定是否显示新手操作引导)

    IOS开发中如何判断程序第一次启动 在软件下载安装完成后,第一次启动往往需要显示一个新手操作引导,来告诉用户怎么操作这个app,这就需要在程序一开始运行就判断程序是否第一次启动,如果是,则显示新手操作 ...

  5. 远程开户系统开放API接口

    如今随着智能识别技术的成熟和商用,金融领域也开始逐渐试水"远程开户".从OCR身份证识别到人脸识别,到如今市场上即将出现完整的远程开户系统,除了需要成熟的技术做支撑外,还需要对市场 ...

  6. 无锁同步-JAVA之Volatile、Atomic和CAS

    1.概要 本文是无锁同步系列文章的第二篇,主要探讨JAVA中的原子操作,以及如何进行无锁同步. 关于JAVA中的原子操作,我们很容易想到的是Volatile变量.java.util.concurren ...

  7. centos 6.5中安装hadoop2.2

    1.配置集群机器之间ssh免密码登录 (1) ssh-keygen -t dsa -P '' -f ~/.ssh/id_dsa 将id_dsa.pub 公钥 加入授权的key中去 这条命令的功能是把公 ...

  8. 在windows上搭建ipv6代理

    事出有因,学校每天12:00之后断网,断网之后怎么办?难道直接睡了?我不甘心.     幸好学校还是留有余地,在断网之后,还是能够上ipv6的,只是现阶段互联网对ipv6支持很不理想,怎么办?刚刚发现 ...

  9. PHP常用函数(收集)

    <?php //===============================时间日期=============================== //y返回年最后两位,Y年四位数,m月份数字 ...

  10. 日历视图(CalendarView)组件的功能和用法

    日历视图(CalendarView)可用于显示和选择日期,用户既可选择一个日期,也可通过触摸来滚动日历.如果希望监控该组件的日历改变,可调用CalendarView的setOnDateChangeLi ...