本節完成任務的新增:點選添加事項完成 inputValue 到 list 的添加。
視訊位址:https://www.bilibili.com/video/BV1h7411N7bg?p=17
注意點:
1、 list每個item都包含id、info、done。id是需要自增的,這節實作思路很巧妙。
2、完成新增之後記得清空輸入框内容。
3、儲存輸入框内容到任務項時,使用trim剔除前後空格+判空處理。
1、store/index.js——增加變量nextId,增加 addInputValue 方法存儲輸入框内容到清單中。
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
list: [],
inputValue: '', // 文本框内容
nextId: 5 // list中id屬性取值
},
mutations: {
initList (state, step) {
state.list = step
},
// 為 inputValue 指派
setInputValue (state, val) {
state.inputValue = val
},
// 将inputValue存儲到list中
addInputValue (state) {
const obj = {
id: state.nextId,
info: state.inputValue.trim(),
done: false
}
state.list.push(obj)
state.nextId++
state.inputValue = ''
}
},
actions: {
getList (context) {
axios.get('/list.json').then(({ data }) => {
console.log(data)
context.commit('initList', data)
})
}
}
})
2、App.vue——添加按鈕綁定addItemToList(),觸發存儲事件
<template>
<div id="app">
<a-input
placeholder="請輸入任務"
class="my_ipt"
:value="inputValue"
@change="handleInputChange"
/>
<a-button type="primary" @click="addItemToList()">添加事項</a-button>
<a-list bordered :dataSource="list" class="dt_list">
<a-list-item slot="renderItem" slot-scope="item">
<!-- 複選框 -->
<a-checkbox>{{ item.info }}</a-checkbox>
<!-- 删除連結 -->
<a slot="actions">删除</a>
</a-list-item>
<!-- footer區域 -->
<div slot="footer" class="footer">
<!-- 未完成的任務個數 -->
<span>0條剩餘</span>
<!-- 操作按鈕 -->
<a-button-group>
<a-button type="primary">全部</a-button>
<a-button>未完成</a-button>
<a-button>已完成</a-button>
</a-button-group>
<!-- 把已經完成的任務清空 -->
<a>清除已完成</a>
</div>
</a-list>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
name: 'app',
data () {
return {}
},
created () {
this.$store.dispatch('getList')
},
computed: {
...mapState(['list', 'inputValue'])
},
methods: {
...mapMutations(['setInputValue', 'addInputValue', 'removeItem']),
// 監聽文本框内容變化
handleInputChange (e) {
// 拿到最新值,并同步到store
console.log(e.target.value)
this.setInputValue(e.target.value)
},
// 向清單項中新增 item 項
addItemToList () {
if (this.inputValue.trim().length <= 0) { // 判空處理
return this.$message.warning('文本框内容不能為空')
}
this.addInputValue()
}
}
}
</script>
<style scoped>
#app {
padding: 10px;
}
.my_ipt {
width: 500px;
margin-right: 10px;
}
.dt_list {
width: 500px;
margin-top: 10px;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>