Question

我的商店中有两个函数，一个通过调用API获取数据，另一个在“已批准”单元格上切换更改。一切正常，除了当我切换此更改时，它发生在数据库中，并且得到响应，提示它已完成，但不会在UI上更新。

我很困惑，在切换更改以反映UI更改后应该怎么做，应该从.the调用我的API，还是应该调用负责从服务器获取数据的操作方法。

export default {
  state: {
    drivers: {
      allDrivers:[],
      driversError:null
    },
    isLoading: false,
    token: localStorage.getItem('token'),
    driverApproved: null,
    driverNotApproved: null
  },
  getters: {
    driversAreLoading (state) {
      return state.isLoading;
    },
    driverError (state) {
      return state.drivers.driversError;
    },
    getAllDrivers(state){
      return state.drivers.allDrivers
    }
  },
  mutations: {
    getAllDrivers (state) {
      state.isLoading=true;
      state.drivers.driversError=null;
    },
    allDriversAvailable(state,payload){
      state.isLoading=false;
      state.drivers.allDrivers=payload;
    },
    allDriversNotAvailable(state,payload){
      state.isLoading=false;
      state.drivers.driversError=payload;
    },
    toggleDriverApproval(state){
      state.isLoading = true;
    },
    driverApprovalCompleted(state){
      state.isLoading = false;
      state.driverApproved = true;
    },
    driverApprovalError(state){
      state.isLoading = false;
      state.driverError = true;
    }
  },
  actions: {
    allDrivers (context) {
      context.commit("getAllDrivers")
      return new Promise((res,rej)=>{
        http.get('/api/admin/getAllDrivers').then(
          response=>{
            if (response.data.success){
              let data=response.data.data;
                data=data.map(function (driver) {
                return {
                  /* response */
                };
              });
              context.commit("allDriversAvailable",data);
              res();
            }else {
              context.commit("allDriversNotAvailable",response.data)
              rej()
            }
          })
          .catch(error=>{
            context.commit("allDriversNotAvailable",error.data)
            rej()
          });
      });
    },
    toggleDriverApproval (context, payload){
      return new Promise((res, rej)=>{
        http.post("/api/admin/toggleDriverApproval",{
          driver_id: payload
        })
        .then( response => {
          context.commit('driverApprovalCompleted');
          res();
        }).catch( error =>{
          context.commit('driverApprovalError');
          rej()
        })
      })
    }
  }
}

这是视图上的代码，我写了必要的代码来更好地阐明问题

export default {
  name: 'Drivers',
  data: () => ({
    data: [],
    allDrivers: [],
    driversErrors: []
  }),
  created() {
    this.$store
      .dispatch('allDrivers')
      .then(() => {
        this.data = this.$store.getters.getAllDrivers
      })
      .catch(() => {
        this.errors = this.$store.getters.driverError
      })
  },
  computed: {
    isLoading() {
      return this.$store.getters.driversAreLoading
    }
  },
  methods: {
    verify: function(row) {
      console.log(row)
      this.$store.dispatch('toggleDriverApproval', row.id).then(() => {
        this.data = this.$store.getters.getAllDrivers
        console.log('done dis')
      })
    },
  },
}

Answer 1

如果我理解您的问题，则您希望在发布请求后，显示数据的UI更改为更新的数据。

如果您使用的是Vuex，则需要进行突变，并使用getter显示数据。

我不确定服务器上如何处理您的发布请求，但是如果成功，通常您会使用更新的数据将响应发送回前端，并使用更新的数据进行更改。

示例：

发出发布请求

toggleDriverApproval (context, payload){
  return new Promise((res, rej)=>{
   http.post("/api/admin/toggleDriverApproval",{
       driver_id: payload
   })
   .then( response => {
   context.commit('driverApprovalCompleted', response.data);
   res();
   }).catch( error =>{
      context.commit('driverApprovalError', error.response.data);
      rej()
     })
   })
 }

如果成功提交了突变

.then( response => {
 context.commit('driverApprovalCompleted', response.data);
 res();
})

response.data是您要用来改变状态的数据。

突变示例：

customMutation(state, data) {
    state.driverApproval = data
}

Getter示例：

driver(state) {
   return state.driverApproval
}

在模板中显示吸气剂

 <template>
  <div v-if="driver">{{driver}}</div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: Example,
  computed: {
    driver() {
      return this.$store.getters.driver
    },
    // or use mapGetters
    ...mapGetters(['driver'])
  }
}
</script>

更多示例可在Vuex Docs

中找到

Vuex通过使用存储操作来更新状态

1 个答案: