Vue.js 如何将收到的数据提交到Vue存储？

我正试图：

• 获取元素的数据

  @使用
  getDetails
  方法单击
  ，并将其放入
  fileProperties:[]
  

• 然后使用

  fileDetails

  computed属性将该数据发送到存储

这适用于我的其他组件，这些组件具有

v-model

和简单的真/假状态，但我不确定如何正确地将由方法创建的数据数组发送到存储区

换句话说，如何使这个计算属性从

fileProperties:[]

获取数据并将其提交到存储？下面的

fileDetails

computed属性没有提交任何内容

代码：

[…]
[...]
导出默认值{
名称：'文件'，
数据（）{
返回{
文件属性：[]
}
},
道具：{
文件：对象
},
方法：{
获取详细信息（值）{
this.fileProperties=[{“扩展名”：path.extname（value.path）}，
{“size”：this.$options.filters.prettySize（value.stat.size）}]
}
},
计算：{
isFile（）{
返回此.file.stat.isFile（）
},
文件详细信息：{
得到（）{
返回此。$store.state.Settings.fileDetails
},
设置（值）{
this.$store.commit（'loadFileDetails'，this.fileProperties）
}     
}
}
}

存储模块：

const state={
文件详细信息：[]
}
常数突变={
loadFileDetails（状态、fileDetails）{
state.fileDetails=fileDetails
}
}

代码笔示例：

---

在这个codepen示例中，如何在单击按钮时将虚拟数据

[{“1”：1}，{“2”：2}]

发送到存储

您永远不会为

fileDetails

设置值，因此永远不会调用computed属性的

set

方法

如果

fileProperties

数据实际上与

fileDetails

数据完全相同，则将其删除并直接在

getDetails

方法中设置

fileDetails

---

下面是一个工作示例：

const store=新的Vuex.store({
声明：{
fileDetails:null
},
突变：{
loadFileDetails（状态、fileDetails）{
state.fileDetails=fileDetails
}
}
})
新Vue({
el:“#应用程序”，
商店，
数据（）{
返回{
fileProperties:null
}
},
方法：{
获取详细信息（值）{
this.fileDetails=[{“1”：1}，{“2”：2}]
}
},
计算：{
文件详细信息：{
得到（）{
返回此。$store.state.fileDetails
},
设置（值）{
此.$store.commit（'loadFileDetails'，值）
}     
}
}
})

元素数据：
{{fileDetails}}

存储数据：
（单击按钮时应显示相同的数据）

{{fileDetails}}

btn

太好了！非常感谢您的解释和工作示例！像你这样的人让stackoverflow成为新手学习的好地方，谢谢你！