如何获取存储在 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()”方法中正确到达，并将其保存在声明的状态类属性中，并设置获取存储在状态中的信息。

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 中显示该信息的组件中，我在脚本的“计算”部分中设置了对之前在 store.js 中声明的 getter 的调用。

    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>

但此时，它甚至没有通过我的“计算”部分中的 getter。

我做错了什么？

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

Answer 1

动作类似于突变，区别在于：动作不是改变状态，而是提交突变。

您需要对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
    }
  }