Vuex를 사용하여 값을 설정하고 가져오려면 어떻게 해야 하는가?

Vuex를 사용하여 값을 설정하고 가져오려면 어떻게 해야 하는가?

나는 Vue는 처음이고 Vuex는 처음 사용하는 거라서 내 부분에 대한 완벽한 오해일 수 있어.

나는 2개의 DatePicker가 있는 페이지가 있는데, 사용자가 값을 선택할 때, 페이지는 웹서비스에 POST를 만드는 다른 페이지로 값을 전달해야 한다.그러기 위해서는 Vuex를 사용해야 한다고 읽어서 노력했는데 Vuex var로 내 var 값을 설정할 수가 없어.여기 제 코드: https://codesandbox.io/s/y0ovmqrqlv

값을 설정하려고 하는 코드(Data.vue에 표시됨)는 다음과 같다.

methods: {
getDatePrimeiro(primeiraDataPassada) {
  var dataUm = primeiraDataPassada;
  this.primeiraData = new Date(
    dataUm.getTime() - dataUm.getTimezoneOffset() * 60000
  )
    .toISOString()
    .split("T")[0];
  console.log(this.primeiraData);
},
getDateSegundo(segundaDataPassada) {
  var dataDois = segundaDataPassada;
  this.segundaData = new Date(
    dataDois.getTime() - dataDois.getTimezoneOffset() * 60000
  )
    .toISOString()
    .split("T")[0];
  console.log(this.segundaData);
  this.retornar;
}
  },

computed: {
    retornar() {
      console.log("Entrou função", this.primeiraData, this.segundaData)
      this.$store.state.primeiraData = this.primeiraData;
      this.$store.state.segundaData = this.segundaData;
    }
  }

제발 도와줘.

게이터, 돌연변이, 행동 등이 필요하다.당신이 현재 하고 있는 것처럼 상점의 변수를 설정하는 것은 잘못된 것이다.

다음은 상점에서 변수를 업데이트하는 방법의 예입니다.다음 변수가 있는 경우:

const defaults = {
  loading: true
}

그런 다음, 상점에서 데이터를 변이시키는 기능이 필요하다.

export default {
  namespaced: true,
  state: Object.assign({}, defaults),
  mutations: {
    updateLoading(state, loading) {
      state.loading = loading
    }
  },
  actions: {
    updateLoading({ commit }, loading) {
      commit('updateLoading', loading)
    }
  }
}

구성 요소에서 이러한 동작을 (데이터를 변이시킬)이라고 부르려면 여러 가지 방법으로 할 수 있다 - 내 개인적인 취향은 다음과 같다.

<template>{{some stuff}}</template>

<script>
import { createNamespacedHelpers } from 'vuex'

// Change out 'common' for wherever your store is kept.
// I like to split out my store into modules to keep things separate
// In this case, I would have a file called /src/store/common.js
const { mapActions } = createNamespacedHelpers('common')

export default {
  ......... // name, components, data, etc
  methods: {
    ...mapActions(['updateLoading']),
    getData() {  // function which calls updateLoading
      this.updateLoading(true);
      ........ // do some stuff
      this.updateLoading(false);
    }
  }
}
</script>

<style>{{some style}}</style>

물론 한 페이지의 데이터를 선형 흐름으로 전달하고 있다면 언제든지 소품/쿼리 매개변수/쿠키/어떤 것이든 사용하여 데이터를 전달할 수 있다.Vuex는 훌륭하지만 항상 필요한 것은 아니다. (그러나 당신의 경우 필요하든 그렇지 않든 간에)

스토어에서 상태를 그렇게 설정해서는 안 된다. 이 값은 읽기 전용(또는 매핑용)이다.당신이 해야 할 일은 당신의 상점에 돌연변이 함수를 만들어 당신의 구성 요소로부터 그것을 호출하는 것이다.

https://vuex.vuejs.org/guide/mutations.html

(또한: 영어 이외의 다른 언어로 부호화하지 마십시오.또한: 그 안에 중복된 코드가 많으니, 그것을 없애도록 노력해야 한다.)

참조URL: https://stackoverflow.com/questions/55122215/how-could-i-get-and-set-values-with-vuex