在vue2项目中用vuex实现一个可增删的任务栏（二）

书接上回

二、获取数据并渲染到页面

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，然后在数据对象中让他自动递增