Доступ к данным vuex по известному идентификатору
Я создал хранилище vuex и сохранил несколько строк данных, полученных из удаленного источника. На самом деле данные представляют собой строки из таблицы mysql.
Данные в этом формате
[{
"id": "1",
"property_country": "usa",
"property_name": "i and m towers",
"property_stars": "4",
"property_city": "austin",
"property_region": "texas",
"property_type": "serviced partment",
"date_created": "3563763673",
"date_updated": "33377363",
"the_user_id": "1"
}, {
"id": "2",
"property_country": "uk",
"property_name": "eagle towers",
"property_stars": "5",
"property_city": "kampala",
"property_region": "kampala",
"property_type": "motel",
"date_created": "3563763673",
"date_updated": "33377363",
"the_user_id": "1"
},
Я хочу иметь доступ к данным vuex по идентификатору, удалять по идентификатору, обновлять по идентификатору
Пока я могу получить доступ к console.info(this.$store.state.properties[1].property_country);
как это. Я знаю идентификатор из цикла данных, поэтому я хочу иметь возможность использовать известный идентификатор для выполнения некоторых мутаций. Как можно просмотреть, как хранятся данные в vuex, и как я могу получить доступ к любым данным, хранящимся в vuex, если я знаю идентификатор строки?
Ответы 2
Получить по Id:
this.$store.state.properties.find(property => property.id == 1).property_country
// OR
getById(id) {
this.$store.state.properties.find(property => property.id == id)
}
getById(1).property_country // "usa"
Удалить по идентификатору
removeById(id) {
this.$store.state.properties.splice(this.$store.state.properties.findIndex(p=>p.id == id), 1)
}
Обновление по идентификатору:
updateById(id, newObject) {
this.$store.state.properties[this.$store.state.properties.findIndex(p=>p.id == id)] = JSON.parse(JSON.stringyfy(newObject))
}
// here you have to make some logic to make sure the id still makes sense.
Обновить отдельное свойство
this.$store.state.properties[this.$store.state.properties.findIndex(p=>p.id == 1)].property_country = "NEW_VALUE"
Путь Vuex
// You can always get data from store using this.$store.state
// But to update, change or remove, you need mutations
mutations: {
removeById(state, id) {
state.properties.splice(state.properties.findIndex(p=>p.id == id), 1)
},
updateById(state, payload) { // payload = {id: 1, newObject = {..]}
state.properties[state.properties.findIndex(p=>p.id == payload.id)] = JSON.parse(JSON.stringyfy(payload.newObject))
}
}
// Use like this
this.$store.commit('removeById', 1)
this.$store.commit('updateById', {id: 1, newObject: {...}})
@tauzN вы не можете мутировать состояние напрямую, которое вы должны передать действием или мутацией
@Gandalf Взгляните на плагин встроенного логгера, чтобы увидеть все изменения в магазине Vuex; это очень полезно во время разработки
@BoussadjraBrahim Конечно, эти функции просто должны быть изменены.
@BoussadjraBrahim Я сразу же получу их там, как только проверю регистратор.
И, как сказал @BoussadjraBrahim, только мутируйте (или изменяйте) что-либо в магазине, используя мутацию, иначе ваша реактивность сломается. Мутации
Да, вы должны определить мутацию и назвать ее как this.$store.commit("UPDATE_BY_ID",id)
Попробуйте геттер с доступ к стилю метода
getters: {
// ...
getPropById: (state) => (id) => {
const {property_country}=state.properties.find(p=> p.id === id)
return property_country;
}
}
затем используйте его как this.$store.getters.getPropById(1)
О, хорошо, не могу сказать, что уделял этому разделу много внимания. Как мне обновить строку, если я знаю идентификатор?
вы можете передать идентификатор в качестве полезной нагрузки для действия, которое использует фиксацию для удаления элемента из состояния
Немного волшебства. Как мне обновить и удалить данный идентификатор и можно ли просмотреть содержимое всего хранилища vuex?