Не могу понять как передать значение из input в store. Когда я нажимаю на кнопку «Добавить элемент», мне нужно создавать блок с кнопкой удаления этого блока и текстом введенным в input, а затем массив из созданных блоков с текстом из input должен сохранятся в localstorage. Сейчас у меня создаётся и сохраняется только блок без текста, никак не могу разобраться как передавать в создаваемый блок введённый в input текст.
Код компонента
<f7-block-title>Some items</f7-block-title>
<f7-block v-for="(cat, n) in getCats" :key="n">
<span>{{ cat }}</span> //сюда должен добавляться текст из input
<f7-button fill color="red" @click="removeCat(n)">Delete Cat</f7-button>
</f7-block>
<f7-list form>
<f7-list-input :value="tempCat" type="text"></f7-list-input>
<f7-button fill color="blue" @click="addCat(tempCat)">Add some item</f7-button>
</f7-list>
import { mapGetters, mapActions } from 'vuex';
export default {
data () {
return {
tempCat: '',
};
},
computed:{
...mapGetters([
'getCats',
]),
},
methods: {
...mapActions([
'addCat',
'removeCat',
])
}
}
Код во VUEX
Vue.use(Vuex);
function loadLocalStorage() {
try {
return JSON.parse(localStorage.getItem('cats'));
} catch(e) {
localStorage.removeItem('cats');
return [];
}
}
export default new Vuex.Store({
state: {
name: '',
password:'',
cats: loadLocalStorage(),
},
getters:{
getCats: state => state.cats,
},
actions: {
addCat(context, data) {
context.commit('ADD_CAT', data);
context.commit('SAVE_CATS');
},
removeCat(context, data) {
context.commit('REMOVE_CAT', data);
context.commit('SAVE_CATS');
},
},
mutations: {
ADD_CAT(state, data) {
state.cats.push(data);
console.log(state.cats);
},
SAVE_CATS(state) {
localStorage.setItem('cats', JSON.stringify(state.cats));
console.log(state.cats);
},
REMOVE_CAT(state, index) {
state.cats.splice(index, 1);
},
},
});
Ссылка на GitHub https://github.com/MrRJDio/ex1
Gif как должно работать и как работает сейчас
localStorage
не реактивен по умолчанию и требует специальной прослойки.cats: loadLocalStorage()
вызывается только один раз при инициализации, а не каждый раз при обращении кcats
.actions
.