Предполагая, что вы на самом деле не используете все методы / атрибуты user
в каждом компоненте, а подмножество их каждый раз, я не вижу никакой причины, по которой решения 1 и 2 не работают для вас, поскольку передачацелый user
объект для каждого компонента не является необходимым.
Допустим, у вашего объекта User
есть некоторые атрибуты (a1, a2, a3 и т. д.) и методы (m1, m2, m3 ...),Если компоненту нужны только некоторые из них (например, a1, a2, m1, m2, m3), тогда с Vuex вы можете использовать функции отображения (mapState, mapGetters, mapMutations и mapActions), чтобы получить точную информацию из user
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
computed: {
...mapState('user', [ 'a1' ]),
...mapGetters('user', [ 'a2' ])
},
methods: {
...mapMutations('user', [ 'm1' ]),
...mapActions('user', [ 'm2', 'm3' ])
}
}
В решении 2 (с использованием прототипа) для обновления компонента при изменении данных user
вы можете сопоставить необходимые данные с компонентом через methods
.
export default {
methods: {
userA1() {
return this.$user.attributes.a1;
},
userM1() {
this.$user.methods.m1();
}
// and so on
}
}
Еще лучше,Вы можете создавать миксины для явного отображения данных из user
и повторно использовать свои миксины, чтобы избежать дублирования кода в компонентах.Его можно применять как для решения Vuex, так и для решения-прототипа.
// mixin1:
const mixin1 = {
computed: {
...mapState('user', [ 'a1' ]),
},
methods: {
...mapMutations('user', [ 'm1' ])
}
}
// mixin2:
const mixin2 = {
computed: {
...mapGetters('user', [ 'a2' ]),
},
methods: {
...mapActions('user', [ 'm2', 'm3' ])
}
}
// component1
export default {
mixins: [ mixin1 ]
}
// component 2
export default {
mixins: [ mixin1, mixin2 ]
}
Но если вам действительно нужно передать весь объект user
каждому компоненту, то ничего не поделаешь.Скорее, вы должны проверить свою реализацию и посмотреть, есть ли лучший способ разбить объект на более значимые.