Vuex 的项目实例4 添加事项

1、给添加事项按钮增加点击事件：

<a-button type="primary" @click="addItemToList">添加事项</a-button>

<script>
import { mapState } from 'vuex'
export default {
  methods: {
    // 添加事件 向列表中新增 item 项
    addItemToList() {
      if (this.inputValue.trim().length <= 0) {
        return this.$message.warning('文本框内容不能为空！')
      }
      this.$store.commit('addItem', this.inputValue)
    }
  }
}
</script>

2、打开 store/index.js 文件，添加变量 nextId 及 addItem :

state: {
    nextId: 5 // 下一个Id
},
mutations: {
    // 添加列表的 item 项
    addItem(state) {
      const obj = {
        id: state.nextId,
        info: state.inputValue.trim(),
        done: false
      }
      state.list.push(obj)
      state.nextId++
      state.inputValue = ''
    }
}

此时点击添加事件按钮，会把文件框中的内容，添加到 list 列表中。