在Vuex中以反应方式发布更新状态

问题描述

创建一个Vuejs应用程序，从而使用Vuex进行组件之间的状态管理。在Vuex存储中，我有一个动作，该动作是从API提取一些数据（效果很好），然后将其填充到状态中（通过一个突变）。接下来，我使用吸气剂将更新后的状态传递给组件。

从操作（通过突变）将数据填充到状态（反应方式）时遇到问题。在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('setDeposit',deposit);
        })
    }
}

//mutations 
const mutations = {
    setDeposit: (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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）