Question

使用 lodash的cloneDeep 克隆从商店传入的用户对象时遇到问题。当我尝试渲染模板中的数据时，{{ user }}显示从存储中检索到的数据，而{{ userCopy }}显示空的存储。我不确定为什么会这样，我是Vue的新手。

store / staff.js

import StaffService from '~/services/StaffService.js'
export const state = () => ({
  user: {
    offers: '',
    legal: ''
  }
})
export const mutations = {
  SET_USER(state, user) {
    state.user = user
  },
}

export const actions = {

  fetchUser({ commit, getters }, id) {
    const user = getters.getUserById(id)

    if (user) {
      commit('SET_USER', user)
    } else {
      StaffService.getUser(id)
        .then((response) => {
          commit('SET_USER', response.data)
        })
        .catch((error) => {
          console.log('There was an error:', error.response)
        })
    }
  },

}

export const getters = {
  getUserById: (state) => (id) => {
    return state.staff.find((user) => user.id === id)
  }
}

页面/设置/_id.vue

<template>
  <div>
    {{ user }} // will display the whole object 
    {{ userCopy }} // will only display empty store object
  </div>
</template>

<script>
import _ from 'lodash'

data() {
  return {
    userCopy: _.cloneDeep(this.$store.state.staff.user)
  }
},
computed: {
  ...mapState({ user: (state) => state.staff.user })
},
created() {
   this.$store.dispatch('staff/fetchUser', this.$route.params.id)
},
</script>

Answer 1

我的猜测是Vue实例的data在state可用之前被初始化了。当computed道具随数据源的变化而填充/更新时。

如果组件在运行时不需要更改user的值，建议将其转换为computed属性。

如果您的组件确实在运行时更改了值（例如，将其v-model添加到输入时），则可以采用两种方法。

方法1：使用mounted钩子

这是通过将user放在data属性中，然后在实例为mounted时分配一个值来完成的，就像这样：

mounted () {
  this.$data.userCopy = _.cloneDeep(this.$store.state.staff.user)
}

方法2：将computed与getter和setter函数一起使用。

通常，您不应该更改computed的值。但是可以使用setter函数来完成。这样，当Vue检测到尝试更改computed道具的尝试时，它将以旧值和新值作为参数执行set()。此函数将更改其源处的值，从而允许get()的返回值反映出来。例如：

computed: {
  userCopy: {
    get () {
      return _.cloneDeep(this.$store.state.staff.user)
    },
    set (newValue) {
      this.$store.commit('updateStaff', newValue) // Replace this line with your equivalent state mutator.
    }
  }
}

克隆/复制状态返回空状态

1 个答案: