#vue.js #vuex #vuejs3 #vuex4
Вопрос:
Интересно, правильно ли я это делаю? Используя Vue3 и Vuex4.
У меня list
в магазине есть массив с именем, который выглядит так:
const store = createStore({
plugins: [createPersistedState()],
state() {
return {
list: [{
name: makeid(7),
id: makeid(5),
group: {
head: false,
inGroup: 0,
pos: 0.0
}
}]
}
Для добавления/удаления элементов я использую мутации с последующей сортировкой массива.
В моем компоненте я получаю массив следующим образом:
let list = reactive(store.getters.getList);
Действия называются так:
store.dispatch('pushElement', el)
store.dispatch('removeElement', id)
Массив обновляется, как и ожидалось, при использовании reactive
. Но мне интересно, предпочтительнее ли использовать computed property
для списка вместо реактивного массива? Я уже пробовал это с
list = computed () => {get()..., set()...}
Но возникли проблемы с удалением элемента из массива.
Итак, я делаю это прямо здесь?
Редактировать:
Как и предполагалось, я сейчас использую вычисляемое свойство для аспекта только для чтения, например:
let list = computed({
get: () => {
return store.getters.getList;
}
});
Комментарии:
1. Если я правильно понял дело, то и то, и другое неверно. Предполагается, что состояние Vuex является единственным источником истины.
list
в компоненте должен быть доступен только для чтения, т. е. вычисляется безset
.2. @EstusFlask, ЗНАЧИТ, я должен полностью поместить маниуляцию в магазин? Но разве это не то, что я только что сделал с двумя
dispatch
для добавления и удаления элемента? Такжеlist
в компоненте просто установлено значение agetter
из магазина.3. ЗНАЧИТ, я должен полностью перенести мануальную терапию в магазин? — да, это цель абстракции Vuex, в противном случае вы могли бы просто сделать
reactive
объект доступным глобально для всех компонентов и напрямую изменить его. Так что да, использование вычисленного безset
-это то, как это можно увидеть во всех примерах Vuex.4. @EstusFlask Спасибо за объяснение. Если вы напишете ответ, я могу его принять. 🙂
Ответ №1:
Правильный способ справиться с этим-использовать вычисляемое свойство вообще без задатчика. Таким образом, обработка данных хранится в хранилище:
let list = computed({
get: () => {
return store.getters.getList;
}
});