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="doAdd()">提交数据</button>
        </div>
    </div>
</template>

<script>
// 引入模块
import gql from "graphql-tag";
// 添加的语句,注意参数要指定类型
var navMutationAddGql = gql`
    mutation($title: String!, $url: String!) {
        addNav(title: $title, url: $url) {
            title
        }
    }
`;
export default {
    name: "app",
    data() {
        return {
            navJson: {
                title: "",
                url: ""
            }
        };
    },
    methods: {
        // 添加的方法
        doAdd() {
            // $apollo.mutate为默认的更新方法
            this.$apollo
                .mutate({
                    // 更新的语句
                    mutation: navMutationAddGql,
                    // 实参列表
                    variables: {
                        title: this.navJson.title,
                        url: this.navJson.url
                    }
                })
                .then(response => {
                    // 输出获取的数据集
                    console.log(response);
                })
                .catch(err => {
                    // 捕获错误
                    console.log(err);
                });
        }
    }
};
</script>

<style scoped></style>