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

<template>
  <div class="container">
    <Task />
    <List />
  </div>
</template>

<script>
import Task from './components/Task.vue'
import List from './components/List.vue'

export default {
  name: 'App',
  components: {
    Task,
    List
  }
}
</script>

---

Logo.vue

// Logo.vue

<template>
  <div class="jumbotron py-3">
    <h1 class="display-4">{{app}}</h1>
    <p class="lead"><span class="badge badge-pill badge-warning">{{author}}</span></p>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState([
      'app',
      'author'
    ])
  }
}
</script>

---

Todo.vue

<template>
    <div>
        <Task/>
        <List/>
    </div>
</template>

<script>
import Task from "./Task";
import List from "./List";
export default {
    name:'Todo',
    components:{
        Task,
        List
    }
}
</script>

---

Task.vue

// List.vue

<template>
  <div>
    <Logo />

    <div class="form-group">
      <input
        @keyup.enter="create(task)"
        v-model="task"
        type="text"
        class="form-control form-control-lg"
        placeholder="新任务" />
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import Logo from "./Logo.vue";

export default {
  components: {
    Logo
  },
  data() {
    return {
      task: ''
    }
  },
  methods: {
    ...mapActions([
      'pushTask'
    ]),
    create: function() {
      this.pushTask(this.task);
      this.task = '';
    }
  }
};
</script>

---

List.vue

// List.vue

<template>
  <ul class="list-group">
    <li v-for="(item, index) in todos" :key="index" class="list-group-item">{{item.content}}
      <button @click="removeTask(item.id)" type="button" class="btn btn-outline-danger btn-sm float-right">X</button>
    </li>
  </ul>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions([
      'fetchTodos',
      'removeTask'
    ])
  },
  computed: {
    ...mapState([
      'todos'
    ])
  },
  created() {
    this.fetchTodos();
  },
}
</script>

---

代码运行后如图：