如何获取存储在vue中store.js状态的信息？

Question

我正在用 vuejs 开发我的第一个应用程序。这是一个包含多个步骤的表单，共享一个页眉和一个页脚，在我进行的过程中，我将我在每个部分中输入的信息发送到 store.js。我被困了几天，因为我无法从表单的第一部分检索信息，无法显示在最后一步中输入的信息的摘要。在每一步中，每次单击前进按钮时，我都会将信息发送到 store.js，然后导航到下一个组件。这将是其中一个组件中的操作示例

      onSubmit() {
             
        const formData = {
            selectedService: this.focusService,
            selectedItem: this.selectedItem,
            selectedShop: this.selectedShop,
            selectedItemId: this.selectedItemId
          };
          this.$store.dispatch('formInfo', {
            selectedService: formData.selectedService,
            selectedItem: formData.selectedItem,
            selectedShop: formData.selectedShop,
            selectedItemId: formData.selectedItemId            
          });
          this.$store.dispatch('setStep', this.step + 1)
          this.$router.push('/shop/buyer')

      },

在 store.js 中，我检查信息是否在 'formInfo()' 方法中正确到达，并将其保存在已声明的状态 class 属性中，然后我设置了一个获取存储在状态中的信息。

export default new Vuex.Store({
  state: {
    step: 0,
    idToken: null,
    items: null,
    shops: null,
    estimations:null,

    owner: {
      ownerCivility: '',
      ownerLastname: '',
      ownerFirstname: '',
      ownerAddressFirstLine: '',
      ownerAddressSecondLine: '',
      ownerAddressThirdLine: '',
      ownerPostalCode: '',
      ownerCity: '',
      ownerPhone: '',
      ownerEmail: '',
      country: 'FR'
    },
    fisrtStepInfo: {

    }
  },
  actions: {
      formInfo({commit, dispatch}, authData) {
      console.log(authData)
      this.fisrtStepInfo = authData
      console.log(this.fisrtStepInfo)
    }

  },
  getters: {
    formInfoFirstStep (state) {
      console.log(state)
      return state.fisrtStepInfo
    }
  }

最后，在我想在 html 中显示该信息的组件中，我在脚本的 'computed' 部分设置了对先前在store.js.


    export default {
        data() {
            return {
              step: 2,
              civil: '',
              name: '',
              lastName: '',
              email: '',
              adresse: '',
              phone: '',
              postalCode: '',
              submitted: false,
            }
        },
        components:{
        },
        computed: {
            firstFormInfo() {
              console.log('firstforminfo')
              return !this.$store.getters.formInfoFirstStep
            },
        }
   }
</script>

但此时，它甚至没有通过我的 'computed' 部分中的 getter。

我做错了什么？

提前感谢您的宝贵时间和帮助。

Answer 1

Actions are similar to mutations, the differences being that: Instead of mutating the state, actions commit mutations.

您需要 commit 突变而不是直接改变 state:

  state: {
    ...
    fisrtStepInfo: {}
  },
  mutations: {
    setStepInfo: (state, data) => state.fisrtStepInfo = data;
  }
  actions: {
    formInfo({commit, dispatch}, authData) {
      console.log(authData)
      commit('setStepInfo', authData)
      console.log(this.fisrtStepInfo)
    }
  },
  getters: {
    formInfoFirstStep (state) {
      console.log(state)
      return state.fisrtStepInfo
    }
  }

如何获取存储在vue中store.js状态的信息？

How to get info stored in the state of the store.js in vue?

javascript

vue.js

state

getter-setter