Блог

Я новичок в Vue, и это первый раз, когда я использую Vuex, так что это может быть полное непонимание с моей стороны.

У меня есть страница, на которой есть 2 DatePicker, когда пользователь выбирает значения, страница должна передавать значения на другую страницу, которая отправит сообщение в веб-сервис. Я прочитал, что для этого мне нужно будет использовать Vuex, поэтому я попытался, но я не могу установить значение моего var в Vuex 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>
  

Конечно, если вы просто передаете данные с одной страницы на другую в линейном потоке, вы всегда можете просто использовать props / параметры запроса / cookies / что угодно для передачи данных. Vuex — это здорово, но не всегда необходимо (хотя, является ли это необходимым в вашем случае, зависит от вас).