vue.js - 如何将收到的数据提交到Vue store？

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 相同数据，然后删除它并设置 fileDetails直接在您的getDetails中方法。

---

这是一个工作示例:

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>