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

Question

我正在尝试：

• 使用getDetails方法获取元素数据@click并放入fileProperties: []

• 然后使用 fileDetails 计算属性将该数据发送到存储

这适用于我的其他组件，它们具有v-model 和简单的真/假状态，但我不确定如何将方法数组创建的数据正确发送到存储。

换句话说，如何使这个计算属性从fileProperties: [] 获取数据并将其提交到存储？下面的 fileDetails 计算属性没有提交任何内容。

代码：

  [...]

  <div @click="getDetails(file)"></div>

  [...]


<script>
  export default {
    name: 'files',
    data () {
      return {
        fileProperties: []
      }
    },
    props: {
      file: Object
    },
    methods: {
      getDetails (value) {
        this.fileProperties = [{"extension": path.extname(value.path)}, 
                              {"size": this.$options.filters.prettySize(value.stat.size)}]
      }
    },
    computed: {
      isFile () {
        return this.file.stat.isFile()
      },
      fileDetails: {
        get () {
          return this.$store.state.Settings.fileDetails
        },
        set (value) {
          this.$store.commit('loadFileDetails', this.fileProperties)
        }     
      }
    }
  }
</script>

存储模块：

const state = {
    fileDetails: []
}

const mutations = {
    loadFileDetails (state, fileDetails) {
        state.fileDetails = fileDetails
    }
}

codepen 示例：

https://codepen.io/anon/pen/qxjdNo?editors=1011

在这个 codepen 示例中，如何在单击按钮时将虚拟数据 [ { "1": 1 }, { "2": 2 } ] 发送到商店？

Answer 1

您永远不会为fileDetails 设置值，因此永远不会调用计算属性的set 方法。 Here's the documentation on computed setters.

如果fileProperties 数据确实与fileDetails 数据相同，则删除它并直接在getDetails 方法中设置fileDetails。

---

这是一个工作示例：

const store = new Vuex.Store({
  state: {
    fileDetails: null
  },
  mutations: {
    loadFileDetails (state, fileDetails) {
      state.fileDetails = fileDetails
    }
  }
})

new Vue({
  el: '#app',
  store,
  data() {
    return {
      fileProperties: null
    }
  },
  methods: {
    getDetails (value) {
      this.fileDetails = [{"1": 1}, {"2": 2}]
    }
  },
  computed: {
    fileDetails: {
      get () {
        return this.$store.state.fileDetails
      },
      set (value) {
        this.$store.commit('loadFileDetails', value)
      }     
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <h1>element data:</h1>
  {{fileDetails}}

  <hr>

  <h1>store data:</h1>
  <p>(should display the same data on button click)</p>
  {{fileDetails}}

  <hr>

  <button @click="getDetails">btn</button>
</div>