Vuex：突变中的均方括号是啥？

Posted 2023-02-22

【中文标题】Vuex：突变中的均方括号是啥？

【英文标题】：Vuex: what is mean square bracket in mutation?Vuex：突变中的均方括号是什么？

【发布时间】：2019-10-26 10:40:47

【问题描述】：

不知道为什么Vuex中"[]"会用到变异值。

"" 这样的代码是什么意思？

export const SOME_MUTATION = 'SOME_MUTATION'

它只是函数的常量名吗？如果是这样，我想知道为什么常量写在"[]"中。

另外，当用于计算或方法属性时，我想知道为什么您将以下代码传递为["SOME_ACTION"] 而不是"SOME_ACTION"。

...mapActions(["SOME_ACTION"]),

考试代码

export const SOME_MUTATION = 'SOME_MUTATION'

import Vuex from 'vuex'
import  SOME_MUTATION  from './mutation-types'

const store = new Vuex.Store(
  state:  ... ,
  mutations: 
    [SOME_MUTATION] (state) 
    
  
)

【问题讨论】：

这是一个计算出来的属性名（实际上是一个方法）。所以mutations是一个对象，它有一个名为SOME_MUTATION值的方法，也就是'SOME_MUTATION'

How to use a variable for a key in a javascript object literal?的可能重复

【参考方案1】：

它被称为computed property name。这不是 Vuex 的事情。这是 ECMAScript 2015 的东西。所以任何支持 ES2015 的引擎都将支持该语法。

在 ES2015 之前，无法计算对象属性名称。这意味着如果你想要一个动态的属性名称，你可能会这样写：

const obj = ;
const result = Math.random() < 0.5;

if (result)
  obj.data = result;
else
  obj.error = result;
  
console.log(obj);

使用 ES2015 计算属性，您现在可以执行以下操作：

const result = Math.random() < 0.5;
const SOME_PROPERTY = result ? 'data' : 'error';

const obj = 
  [SOME_PROPERTY]: result


console.log(obj);

当然这只是一个非常简化的例子，并没有真正展示它带来了什么好处，但在我看来，这是一个非常好的语法糖。

您可以在线找到有关其用例的更多信息。