当前位置：首页 > news >正文

利用 vuex写一个todoList

news 来源：原创 2024/5/19 2:08:50

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>

在这里插入图片描述