GraphQL学习第九篇 －Vue中使用Vue-apollo进行编辑操作

在Vue中集中Vue-apollo以后(如何集成请查看本专栏第六篇），就可以使用它进行编辑数据了。

<template>
    <div class="news">
        <div class="navForm">
            导航名称：
            <input v-model="navJson.title" type="text"/>
            导航链接：
            <input v-model="navJson.url" type="text"/>
            <button @click="doEdit()">修改数据</button>
        </div>
    </div>
</template>

<script>
// 引入模块
import gql from "graphql-tag";

// 修改的语句,注意参数要指定类型
var navMutationEditGql = gql`
    mutation($id: String!, $title: String!, $url: String!) {
        editNav(_id: $id, title: $title, url: $url) {
            title
        }
    }
`;

export default {
    name: "app",
    data() {
        return {
            navJson: {
                title: "",
                url: ""
            }
        };
    },
    methods: {
        // 修改的方法
        doEdit() {
            // $apollo.mutate为默认的更新方法
            this.$apollo
                .mutate({
                    // 修改的语句
                    mutation: navMutationEditGql,
                    // 实参列表
                    variables: {
                        _id: "5c7a1eeaa445b5090c70a021",
                        title: this.navJson.title,
                        url: this.navJson.url
                    }
                })
                .then(response => {
                    // 输出获取的数据集
                    console.log(response);
                })
                .catch(err => {
                    // 捕获错误
                    console.log(err);
                });
        }
    }
};
</script>

<style scoped>
</style>