书接上回
二、获取数据并渲染到页面
1.在public下新建一个json 文件
数据搞里头
[
{
"id": 0,
"info": "Racing car sprays burning fuel into crowd.",
"done": false
},
{
"id": 1,
"info": "Japanese princess to wed commoner.",
"done": false
},
{
"id": 2,
"info": "Australian walks 100km after outback crash.",
"done": false
},
{
"id": 3,
"info": "Man charged over missing wedding girl.",
"done": false
},
{
"id": 4,
"info": "Los Angeles battles huge wildfires.",
"done": false
}
]
2. 在state节点中用list数组存放接收的数据
state: {
list: []
}
3. 在 mutations 节点中定义一个方法,把接收到的数据赋值给state中的list数组
mutations: {
initList (state, list) {
state.list = list
}
}
4. 在store 的 index.js 中的actions节点使用 axios 请求json 数据
actions: {
getList (context) {
axios.get('/list.json').then(({ data }) => {
console.log(data)
context.commit('initList', data)
})
}
}
5. App.vue 中
按需导入一个{mapState},在计算属性中调用mapState,传一个 list 数组,前面加一个展开运算符(...)
三、文本框内容双向同步
1. 通过 mapState 将这个值映射为当前的计算属性
2. 通过属性绑定给绑定到文本框的 value 属性身上(实现单向),监听文本框的 change 事件,拿到文本框的值
3.在 index.js 的 mutations 节点下新建一个方法
4. 在App.vue 中新建一个 methods ,用来调用 setInputValue 方法,并且传递最新的参数
四、实现添加任务功能
1.在 App.vue 的 methods 节点下新增一个 addItemToList 方法,$message.warning 用来判断文本框是否为空(调用的是组件库 Antd 中的)
2.如果不为空,就调用 mutations 节点下的 addItem方法,立即组织出一个数据对象
3. 让 id 自动递增,在state中声明一个nextId,然后在数据对象中让他自动递增