如何在地图函数中声明 Vuex getter 返回数据答案

【问题标题】：How to declare Vuex gettres return data in a map function如何在地图函数中声明 Vuex getter 返回数据
【发布时间】：2018-10-20 13:48:19
【问题描述】：

我已经在我的 vuex 中声明了 state 和 getter，我想在其中获得 state 中现有产品的新价格和标题。
当我在 getter 中声明返回数据时，它会引发语法错误，这是 ; 预期 , 给定的。
但从我的角度来看，它是正确的，那么确切的错误是什么？

state: {
  value1: 1,
  products: [
    { title: 'Hp1', price: 500 },
    { title: 'Hp2', price: 600 },
    { title: 'Hp3', price: 700 },
  ]
},

getters: {
  saleProducts: state => {
    var newProductsList = state.products.map(product => {
      return 
        {
          title: '** '+ product.title +' **',
          price: product.price/2 + " % Off"
        }
    });
    return newProductsList;
  }
}

【问题讨论】：

我认为state 不是 vue 组件的有效属性。我知道您说这是 vuex，但没有上下文和实际错误，很难知道可能出了什么问题。你能创建一个codesandbox.io吗？
return { title: '** '+ product.title +' **', price: product.price/2 + " % Off" } 在标题之后我给出了 ',' 但它是期待';'但到目前为止我知道'，'是正确的。但是在这里我得到了放置'，'的错误。
这个答案对你有帮助吗？

标签： vue.js vuex

【解决方案1】：

这有点奇怪。当我复制并粘贴您的代码时，它不起作用。当我从您的示例中自己手动输入时，它就可以工作了。通常这种事情意味着你在某处混合了一个无效的 ASCII 字符。我更改的主要内容是使用双引号而不是单引号：

  state: {
    value1: 1,
    products: [
      { title: 'Hp1', price: 500 },
      { title: 'Hp2', price: 600 },
      { title: 'Hp3', price: 700 },
    ]
  },
  getters: {
    saleProducts: state => {
      var newProductsList = state.products.map(product => {
        return {
          title: "** " + product.title + " **",
          price: product.price/2 + " % Off"
        }
      })
    }
  },

看看你是否能发现差异。这是codeandbox.io 链接：https://codesandbox.io/s/ywr1v7my19

浏览至/store/modules/main.js 以现场查看。

【讨论】：