RESTful 风格 API 操作网络通信中的todos案例

1.vuex操作流程：

  view --- (dispatch) --> actions --- (commit) --> mutations -- (修改) --> state --- (通知/更新) --> view

---

2.
    1.状态管理模式库（组件中状态集中，单一示例） 
    2.标准化操作流程， 引入了 mutations

---

3. postman 是什么

    模拟器：发送各种 HTTP 请求(HTTP - 超文本传输协议)
    1.套接字 （底层） 
    2.HTTP/HTTPS 通用 移动端（App）Web
    
    HTTP 请求方法：C：post, R：get, U：put, D：delete

---

---

---

---

创建一个vue

 

---

 

---

打开ui （vue ui）

---

安装依赖 

---

---

 依赖安装后：

 

---

 在vs中如图所示：

---

---

 index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

const path = 'http://111.229.66.196:9000/api/todos';

export default new Vuex.Store({
  state: {
    app: '备忘录',
    author: '小白',
    todos: []
  },
  mutations: {
    SET_TODOS(state, todos) {
      state.todos = todos;
    },
    PUSH_TODO(state, todo) {
      state.todos.unshift(todo);
    }
  },
  actions: {
    fetchTodos(context) {
      axios.get(path)
      .then(res => {
        console.log(res);
        context.commit('SET_TODOS', res.data);
      })
      .catch(err => {
        console.error(err); 
      })
    },
    pushTask(context, task) {
      const todo = {content: task};
      axios.post(path,todo)
      .then(res => {
        console.log(res);
        context.commit('PUSH_TODO', res.data);
      })
      .catch(err => {
        console.error(err); 
      })
    },
    removeTask(context, id) {
      axios.delete(`${path}/${id}`)
      .then(res => {
        console.log(res);
        axios.get(path)
        .then(res => {
          console.log(res);
          context.commit('SET_TODOS', res.data);
        })
        .catch(err => {
          console.error(err); 
        })
      })
      .catch(err => {
        console.error(err); 
      })
    }
  },
  modules: {
  }
})

---

package.json 

{
  "name": "todos",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-plugin-vuex": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "vue-template-compiler": "^2.6.11"
  }
}

---

App.vue

---

Logo.vue

// Logo.vue

---

Todo.vue

---

Task.vue

// List.vue

---

List.vue

// List.vue

---

代码运行后如图：