如何使用 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

你需要 getter、mutations、action 等。像你现在这样设置 store 的变量是错误的。

以下示例说明了如何更新商店中的变量。如果你有以下变量：

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/query parameters/cookies/whatever 来传递数据。 Vuex 很棒，但并不总是必要的（但在你的情况下是否需要它取决于你）。

Answer 2

您不应该这样设置商店中的状态，该值仅用于读取（或映射）。您应该做的是在您的商店中创建一个 mutate 函数并从您的组件中调用它。

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

（另外：不要用英语以外的其他语言编写代码。另外：那里有很多重复的代码，你应该尝试摆脱它。）