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>