[SOME_MUTATION] (state) {// mutate state}Vuex中使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名

使用常量替代 Mutation 事件类型

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用,同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然:

理解:

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

这是es6的写法,转换为es5时这样的

var SOME_MUTATION = ‘SOME_MUTATION‘
var mutations = {}
mutations[SOME_MUTATION] = function (state) {
    // mutate state
}
...

相当于给对象mutations添加属性,属性名为SOME_MUTATION,属性值为函数

function (state) {
    // mutate state
}

参考:ECMAScript 6 入门-对象的扩展

原文地址:https://www.cnblogs.com/itgezhu/p/11978708.html

时间: 2024-08-03 21:07:56

[SOME_MUTATION] (state) {// mutate state}Vuex中使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名的相关文章

java为什么非静态内部类中不能有static修饰的属性,但却可以有常量?

如:public class InnerClassDemo{int x;class A{static int a = 0;//这样写是不合法的.static final int b=0;//这样写是合法的 }} java类加载顺序,首先加载类,执行static变量初始化,接下来执行对象的创建,如果我们要执行代码中的变量int a 初始化,那么必须先执行加载外部类,再加载内部类,最后初始化静态变量 a ,问题就出在加载内部类上面,我们可以把内部类看成外部类的非静态成员,它的初始化必须在外部类对象创

JSP中<meta http-equiv="pragma" content="no-cache">属性ttp-equiv功能介绍<转载>

http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值. meat标签的http-equiv属性语法格式是:<meta http-equiv="参数" content="参数变量值"> :其中http-equiv属性主要有以下几种参数: A.Expires(期限) 说明:可以用于设定网页的到期时间.一旦网页

vuex中mutations常量加中括号的写法解析

方法名定义成常量的写法 经常在项目中遇到这样的写法: [SOME_MUTATION] (state) { // mutate state } 在es6中字面量定义对象时,用表达式作为对象的属性名,把表达式放在方括号内 const SOME_MUTATION = 'SOME_MUTATION' var mutations = {} mutations[SOME_MUTATION] = function (state) { // mutate state } //相当于对象的属性打点调用和中括号调用

在C语言中以编程的方式获取函数名

调试常用的 __FILE__, __FUNCTION__, __LINE__ 调试常用的 __FILE__, __FUNCTION__, __LINE__ 没想到 VC6 不支持 __FUNCTION__ 所以我写了如下的奇怪代码 //用来记录当前行和当前函数//也可说是记录 堆栈void log_stack(const char *file, int line, const char * function); //当然还要对 __FUNCTION__ 宏作点修饰,因为这个宏只是在函数里面才起作

vue中计算属性vs方法的区别

一 什么是计算属性? 计算属性(computed),也是一个属性,也是用来存储数据用的,但是和data属性相比还是有区别 1 数据是可以进行逻辑处理相关的操作 2 可以对计算属性中的数据进行监视 例如: 调用的方式都是一样的 二 计算属性和方法的区别? 1 计算属性是基于它所依赖的数据进行更新,在有在相关依赖的数据发生变化了才会进行更新,而普通的方法每次都会执行 2 计算属性是有缓存的,只要它所依赖的数据没有发生改变,后面的每一次访问计算属性中的值,都是之前缓存的结果,不会重复执行. 例如: h

vue常见问题处理 -- 页面刷新时,如何保持原有vuex中的state信息

一.页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决. 1.localstorage 可以使用 localstorage 来保存信息. [在某组件中添加如下钩子函数.比如 App.vue中] created() { //在页面加载时读取localStorage里的状态信息 if (localStorage.getItem("

vuex中使用对象展开运算符

使用场景 当需要进行vuex进行数据状态管理的时候,会使用到mapGetters,mapState,还有自身的计算属性的时候,这个时候就会用到这个了! 1.首先需要安装 npm install babel-plugin-transform-object-rest-spread -D 2.需要在.babelrc文件中新增以下 { "presets": [ ["env", { "modules": false }] ], "plugins&

vuex中module的命名空间概念

vuex中module的命名空间概念 默认情况下,模块内部的 action.mutation 和 getter 是注册在全局命名空间的. 弊端1:不同模块中有相同命名的mutations.actions时,不同模块对同一 mutation 或 action 作出响应. 弊端2:当一个项目中store分了很多模块的时候,在使用辅助函数mapState.mapGetters.mapMutations.mapActions时,很难查询,引用的state.getters.mutations.action

vue.js的状态管理vuex中store的使用

一.状态管理(vuex)简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试.状态快照导入导出等高级调试功能. 二.状态管理核心 状态管理有5个核心,分别是state.getter.mutation.action以及module.分别简单的介绍一下它们: 1.state state为