상태를 업데이트하지 않는 Vuex 변환

상태를 업데이트하지 않는 Vuex 변환

컴포넌트 간의 상태 관리를 위해 Vuex를 사용하는 Vuejs 어플리케이션 작업.Vuex 스토어에서는 API에서 일부 데이터를 가져온 후(정상적으로 작동) 변환하여 해당 상태를 채우는 작업이 있습니다.다음으로 getters를 사용하여 업데이트된 상태를 컴포넌트에 전달합니다.

문제는 액션에서 상태로 데이터를 채우는 데 문제가 있다는 것입니다.DOM에서 계산된 속성을 통해 가져오거나 getter를 사용하여 가져오려고 시도했지만 빈 문자열을 얻습니다.

Vuex 스토어

const getDefaultState = () => {
    return {
        clientDeposit: ''
    }
}


//state
const state = getDefaultState();


//getters
const getters = {
    getDeposit: (state) => state.clientDeposit
}

//actions
const actions = {
    fetchClients({ commit}) {

       const clientId ="23"
       axios.post('/api/motor/fetchClients', {
         ClientId: clientId,
        })
         .then((response)=> {
          
          //console.log(response);  //returns data

          const deposit = response.data;
          commit('setIpfDeposit', deposit);
        })
    }
}

//mutations 
const mutations = {
    setIpfDeposit: (state, value) => (state.clientDeposit = value)
}

export default {
    state,
    getters,
    actions,
    mutations
}

요소

<template>
  <div>
        <button onclick="fetchClients()">Fetch Clients</button> 
        Deposit (Via computed property) : {{ fetchDeposit }}     
        Deposit (from getter) : {{ getDeposit }}         
  </div>
</template>

<script>
import { mapGetters , mapActions } from "vuex";
import axios from "axios";

export default {
  name: "",
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters([
        "getDeposit"
    ]),
    fetchDeposit(){
        return this.getDeposit
    },
  },
  methods:{
    ...mapActions([
        "fetchClients"
    ])
  }
};
</script>

<style scoped>

</style>

먼저 데이터를 가져와야 합니다.vuex에서 mapActions 가져오기

import {mapActions, mapGetters} from 'vuex';

구성 요소의 메서드 개체에서 fetchClients 메서드를 가져옵니다.

methods:{
 ... mapActions(['fetchClients']),
}

다음으로 컴포넌트가 작성한 라이프 사이클 메서드에서 fetchClients 메서드를 호출합니다.

created(){
 this.fetchClients();
}

언급URL : https://stackoverflow.com/questions/63721249/vuex-mutation-not-updating-the-state