vue.js - 我如何使用 Vuex 获取和设置值？

Question

我是 Vue 新手，这是我第一次使用 Vuex，所以这可能完全是我的误解。

我有一个页面有 2 个 DatePicker，当用户选择值时，该页面应该将这些值传递到另一个页面，该页面将向 WebService 发送 POST。我读到要做到这一点，我需要使用 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;
    }
  }

请帮助我。

Answer 1

您需要 getters、mutations、actions 等。像您当前所做的那样设置商店的变量是错误的。

以下是如何更新商店中的变量的示例。如果您有以下变量:

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 很棒，但并不总是必要的(不过，在您的情况下是否必要取决于您)。