изменить локальный объект данных при изменении глобального состояния

Question

Я пытаюсь редактировать и обновлять, используя vuex. У меня есть два компонента: один - форма для ввода / редактирования, другой - для просмотра данных. Когда я нажимаю кнопку редактирования компонента представления, я хочу заполнить компонент формы данными из внутреннего интерфейса.

Обратите внимание, что у меня уже есть объект данных в компоненте формы, который связан с формой и используется для хранения данных. Я хочу изменить это при редактировании. У меня нет проблем с получением данных из бэкэнда.

Я просто не могу изменить локальный объект данных из состояния

Это мои коды, которые я пробовал

Компонент формы:

import { mapState } from 'vuex'
export default {
    data(){
        return{
            form:{
                id:'',
                name:'',
                email:'',
                phone:'',
                address:''
            }
        }
    },
    computed:{
        ...mapState({
            data (state) {
                this.form=state.employee; //This is where I am stuck
            }
         }),

    }

состояние:

export default{
    state:{
        employee:{}
    },
    getters:{}
    },
    mutations:{
        setEmployee(state,employee){
            state.employee=employee;
        }
    },
    actions:{
        fetchEmployee({commit},id){
            axios.put('employee-edit/'+id)
            .then(res=>res.data)
            .then(employee=>{
                commit('setEmployee',employee)
            })
        }
    }
}

просмотр компонента:

export default {
    methods:{
        editEmployee(id){
            this.$store.dispatch('fetchEmployee',id);
        }
    }
}

Answer 1

Множество проблем / недоразумений с вашим подходом.

1) computed свойства являются «пассивными» и должны return значение «вычисляться» из других значений. Прямое присвоение вашему локальному состоянию, вероятно, не то, что вы хотите сделать.

2) Методы HTTP: In general the HTTP PUT method replaces the resource at the current URL with the resource contained within the request.
Пожалуйста, ознакомьтесь с методами http и с тем, как они должны использоваться. Вы хотите, чтобы GET

3) mapState - вспомогательный метод, если вам нужно несколько геттеров из хранилища состояний vuex. Я предлагаю вам использовать this.$store.getters.myVariableInState для простых задач, как в вашем примере.

То, что вы, вероятно, хотите, больше похоже на эти строки:

// store
getters:{
  employee: state => state.employee
}

// component
computed: {
  employee() {
    return this.$store.getters.employee
  }
}

Если ваши действия уже были отправлены ранее и данныедоступно в магазине, и все, что вам нужно, это

methods: {
  editEmployee() {
    this.form = this.employee
  }
}

Поскольку в вашем вопросе указано «изменить локальные данные об изменении состояния», вот подход для этого:
watch ваше локальное вычисляемое свойство

watch: {
  employee() {
    // this.employee (the computed value) now refers to the new data 
    // and this method is triggered whenever state.employee changes
  }
}