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

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值')