Vuex关于提交的更新视图

Question

我是Vuex js的新手，以及有关商店的一切。

我有以下store.js

import Vuex from 'vuex'
import Vue from 'vue'
import axios from 'axios';


Vue.use(Vuex)

export const store = new Vuex.Store({
        state: {
            pacientes: []
        },
        mutations: {
            getPacientes() {
                axios.get('http://slimapi/api/pacientes')
                .then(response => {
                    this.state.pacientes = response.data
                })
                .catch(e => {
                    console.log(e)
                })  
                }
        }

});

然后，当我单击模态（v-dialog）上的调用此函数的按钮时，我将进行提交

 agregarTurno()
  {
    axios.post('/api/pacientes/add', {

        ...

     }).then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

               this.$store.dispatch('fetchPacientes')
  }

然后我将我的turno.vue（作为app.vue）保存在其中，以检索商店的状态。 无论何时进行提交，状态都不会在视图上更新！ 。

状态更改后，我正在尝试更新视图！

turno.vue

export default {
  name: 'turno',
  data () {
    return {
      pacientes: this.$store.state
      }
    },
    created() {
      this.$store.commit('getPacientes')
    },
    mounted() {
      this.$store.commit('getPacientes')
    },
  components: {
    tarjetaTurno,
    bottomNav,
    modalTurno 
  }
}

我已经准备好一些帖子，其中一些谈论使用计算属性，但是我不了解如何以及每次状态更改时是否需要更新视图。

谢谢大家！

---

---

已解决

store.js

export const store = new Vuex.Store({
        state: {
            pacientes: []
        },
        mutations: {
            setPacientes(state, payload) {
                state.pacientes = payload.pacientes
            }
        },
        actions: {
            fetchPacientes({commit}) {
                axios.get('http://slimapi/api/pacientes')
                     .then(response => {
                        commit('setPacientes', {pacientes: response.data}); //After getting patients, set the state
                     })
                     .catch(e => {
                        console.log(e)
                     }) 
            },
            addPacientes(context){
                axios.post('/api/pacientes/add', {
                    nombre: "test",
                    apellido: "test",
                    edad: "test",
                    peso_inicial:"test",
                    patologia:"test"
                   }).then(function (response){
                        context.dispatch('fetchPacientes'); //After adding patient, dispatch the fetchPatient to get them and set state 
                    })
                    .catch(function (error) {
                      console.log(error);
                    });          
            }
        }
});

调用该函数以添加患者的组件模态：

  agregarTurno()
  {
    this.$store.dispatch('addPacientes');
  }

Turno.vue（根），在状态更改时会更新

export default {
  name: 'turno',
  data () {
    return {
      pacientes: this.$store.state
      }
    },
    created() {
      this.$store.dispatch('fetchPacientes')
    },

Answer 1

您的问题是突变是同步的，而您正在突变内部进行axios.get调用（异步）。

您应该在组件或vuex action中处理axios.get：

使用vuex动作来处理axios.get（）调用：

export const store = new Vuex.Store({
  state: {
    pacientes: []
  },
  mutations: {
    setPacientes(state, payload) {
      // note how we don't call this.state.
      // state comes as param.
      state.pacientes = payload.pacientes;
    },
  actions: {
    fetchPacientes(context){
      axios.get('http://slimapi/api/pacientes')
      .then(response => {
          context.commit('setPacientes', {pacientes: response.data});
      })
      .catch(e => {
          console.log(e)
      }) 
    }
  }
  }
});

然后在您的组件中：

agregarTurno() {
  // commit is for mutations, while dispatch is for actions
  this.$store.dispatch('fetchPacientes')
}

避免vuex操作：

您可以在组件中进行api调用，然后commit进行突变：

agregarTurno() {
  axios.get('http://slimapi/api/pacientes')
  .then(response => {
    this.$store.commit('setPacientes', {pacientes: response.data});
  })
  .catch(e => {
      console.log(e)
  })
}

但是，如果几个组件将进行此api调用，则可以通过将其放在vuex操作中来避免代码重复。

我认为通常将这种异步代码作为vuex动作存储在商店中。

您粘贴的代码中的某些问题

您无需同时在created()和mounted()钩子中调度动作。我猜created()是最好的选择。

要使您的组件对存储产生反应，可以设置一个引用存储中的data()的{​​{1}}成员，我可以这样做：

pacientes

现在，如果您的组件要使用商店中的很多东西，我将设置一个vuex getter。