vuex中的 es6 语法 【举例说明】

目录

vuex中的解构赋值

vuex中的 es6-对象扩展-属性简洁表达式

vuex中的 es6-对象扩展-属性名表达式

vuex中的 es6-对象扩展-展开运算符

vuex中的 es6-模块化

---

vuex中的解构赋值

实践中，我们会经常用到 ES2015 的 参数解构 (opens new window)来简化代码（特别是我们需要调用 commit 很多次的时候）：

之前：

actions: { increment (context) { context.commit('increment') } }

之后

actions: { increment ({commit}) { commit('increment') } }

vuex中的 es6-对象扩展-属性简洁表达式

new Vue({ el: '#app', store })

vuex中的 es6-对象扩展-属性名表达式

ES6 允许字面量定义对象时，用表达式作为对象的属性名，即把表达式放在方括号内。

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。

// mutation-types.js export const SOME_MUTATION = 'SOME_MUTATION'

// store.js import Vuex from 'vuex' import { SOME_MUTATION } from './mutation-types' const store = new Vuex.Store({ state: { ... }, mutations: { // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名 [SOME_MUTATION] (state) { // mutate state } } })

vuex中的 es6-对象扩展-展开运算符

computed: { localComputed () { /* ... */ }, // 使用对象展开运算符将此对象混入到外部对象中 ...mapState({ // ... }) }

vuex中的 es6-模块化

import { mapState } from 'vuex';