如何将收到的数据提交给Vue商店？

Question

我试图：

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

• 然后使用fileDetails计算属性

将该数据发送到商店

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

换句话说，如何使这个计算属性从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。

这是一个有效的例子：

＆＃13;

＆＃13;

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)
      }     
    }
  }
})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;