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

2018-12-26  本文已影响0人  knot98

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值')
上一篇下一篇

猜你喜欢

热点阅读