美文网首页
vuex 状态管理器与vue-cookiesd的简单使用

vuex 状态管理器与vue-cookiesd的简单使用

作者: knot98 | 来源:发表于2018-12-26 15:35 被阅读0次

    vuex 状态管理器

    用来存储cookie信息

    简单使用:

    安装:在创建vue工程时,添加该组件即可。
    在main.js 中配置:
    new Vue({
        router,
        store,
        render: h => h(App)
    })
    
    在其他组件中简单使用:
    // 赋值:
    this.$store.state.name=this.name
    // 取值
    this.$store.state.name
    
    store.js 组件介绍
    export default new Vuex.Store({
        // 存储全局变量
        state: {
            username: Cookie.get('username'),
            token: Cookie.get('token')
    
        },
        mutations: {
            // 写方法,这里面写的所有方法,第一个参数,必须是state
            login: function (state, response) {
                //修改这两个变量的值
                state.username = response.data.username;
                state.token = response.data.token;
                //    往cookie中写数据
                Cookie.set('username', response.data.username);
                Cookie.set('token', response.data.token)
    
            },
            logout: function (state) {
                //修改这两个变量的值
                state.username = "";
                state.token = "";
                //    往cookie中写数据
                Cookie.set('username', "");
                Cookie.set('token', "");
            }
        },
        actions: {}
    })
    
    

    vue-cookies 简单使用

    安装命令:
    npm install vue-cookies
    
    使用:
    // 在store.js 中导入
    import Cookie from 'vue-cookies'
    // 取值:
    Cookie.get('根据key值')
    //赋值: 
    Cookie.set('key值','value值')
    

    相关文章

      网友评论

          本文标题:vuex 状态管理器与vue-cookiesd的简单使用

          本文链接:https://www.haomeiwen.com/subject/labhlqtx.html