1 store 仓库下有index,js文件
state: { // 存放数据
todoList: JSON.parse(sessionStorage.getItem('todoList')) || []
},
mutations: { // 同步方法
btn(state, val) {
state.todoList.push({
id:Date.now(),
name: val
})
sessionStorage.setItem('todoList', JSON.stringify(state.todoList))
},
remove(state, index) {
console.log(index) // 接收过来的id参数
// state.todoList.splice(index, 1)
// sessionStorage.setItem('todoList', JSON.stringify(state.todoList))
state.todoList.some((item , i) => { // some 方法一个为true即为true
console.log(item.id)
if (item.id == index) { //判断有一个符合some 方法的id
console.log('../', item.id)
state.todoList.splice(i, 1)
return sessionStorage.setItem('todoList',JSON.stringify(state.todoList))
}
})
}
},
vue文件里的内容
在元素上写一个mode模板
<div>todoList</div>
<input type="text" v-model="str">
<button @click='add' > 添加 </button>
<ul>
<!-- 根据下标删除 -->
<!-- <li v-for="(item, index) in todoList" :key="item.id">{{item.name}}
<button @click='remove(index)'>删除</button>
</li> -->
<!-- 根据id删除 -->
<li v-for="item in todoList" :key="item.id">{{item.name}}
<button @click='remove(item.id)'>删除</button>
</li>
</ul>
script里的内容
<script>
export default {
data() {
return {
str: '',
todoList: this.$store.state.todoList
}
},
computed: {
},
methods: {
add() {
if(this.str === '') return;
this.$store.commit('btn', this.str);
this.str = ''
},
// 根据下标删除
// remove(index) {
// console.log(index, 'index')
// this.$store.commit('remove', index)
// }
// 根据id删除
remove(id) {
console.log(id, 'id')
this.$store.commit('remove', id)
}
},
}
</script>