vuex结合vue-cookies的使用

一、创建vuex

import Vue from 'vue'
import Vuex from 'vuex'
import cookie from "vue-cookies"

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        //从cookie中取
        username: cookie.get("name"),
        token: cookie.get("token"),
        date:cookie.get("date")

    },
    mutations: {
        savetoken: function (state, data) {
            //赋值
            // console.log(data);
            state.username = data.name;
            state.token = data.token;
            //写入cookie
            cookie.set("name", data.name);
            cookie.set("token", data.token);
        },
        cleartoken: function () {
            cookie.set("name", "");
            cookie.set("token", "")
        },

        savedate:function (state,date) {
            console.log(date)
            state.date=date;
            cookie.set("date",date)
        },
        cleardate:function () {
            cookie.set("date","")
        },

    },
    actions: {}
})

二、组件中使用

<script>

    export default {
        name: 'login',
        data: function () {
            return {
                form: {
                    name: '',
                    pwd: '',
                    date1: '',
                    repwd: '',
                }

            }
        },
        methods: {
            login: function () {
                var _this = this.form;
                this.$ajax.request({
                    url: _this.$url + "login/",
                    method: "post",
                    data: {name: _this.name, pwd: _this.pwd}
                }).then(function (res) {
                    console.log(res.data);
                    if (res.data.status == 100) {
                        _this.$store.commit("savetoken", res.data)
                    }
                    else {
                        alert(res.data.msg)
                    }
                })
            },
            savedata: function () {
                var _this = this;

                if (_this.form.date1) {
                    _this.$store.commit("savedate", _this.form.date1)
                }
            }
        },

        mounted() {
            var _this = this;
            if (_this.$store.state.date) {
                _this.form.date1 = _this.$store.state.date
                _this.$store.commit("cleardate")
            }
        }

    }

</script>

<template>
    <div class="course">
        <h1>登入页面</h1>
        <el-form label-width="100px"
                 class="col-lg-4 col-lg-offset-4">
            <el-form-item label="用户名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="form.pwd"></el-input>
            </el-form-item>

            <el-form-item>
                <h4 v-if="!form.pwd&&!form.name" style="color: red;">请输入用户名和密码：</h4>
            </el-form-item>

            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"
                            @input="savedata"></el-date-picker>

            <el-form-item>
                <a href="/course">
                    <el-button type="primary" @click="login">提交</el-button>
                </a>
            </el-form-item>

        </el-form>

    </div>
</template>