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）如果您需要从vuex状态存储中获取多个getter，mapState是一个辅助方法。建议您将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
  }
}

更改全局状态时更改本地数据对象

1 个答案: