수신된 데이터를 Vue 저장소에 커밋하는 방법?

수신된 데이터를 Vue 저장소에 커밋하는 방법?

나는 다음과 같이 하려고 한다.

• 원소의 자료를 얻다.@click사용.getDetails방법을 써서 에 넣다.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
    }
}

코드펜의 예:

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

이 코드펜 예제에서 더미 데이터를 전송하는 방법[ { "1": 1 }, { "2": 2 } ]버튼 클릭으로 상점에 갈까?

값을 설정하지 않는 경우fileDetails, 그래서 .set계산된 속성의 방법은 절대 호출되지 않는다.다음은 계산된 세터에 대한 문서 입니다.

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

참조URL: https://stackoverflow.com/questions/48747203/how-to-commit-received-data-to-vue-store