美文网首页
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的简单使用

    vuex 状态管理器 用来存储cookie信息 简单使用: 安装:在创建vue工程时,添加该组件即可。 在main...

  • Vuex 2.0

    概念 Vuex 类似 Redux 的状态管理器,用来管理Vue的所有组件状态。 为什么使用Vuex? 当你打算开发...

  • Vuex

    简介:vue官方提供的状态管理器 vuex的使用步骤: 安装:npm install --save vuex; 在...

  • vuex

    VUEX的使用 vuex的作用: 常用来作为全局状态管理器, 定义一个状态全局可用,部分功能与缓存类似,但是vue...

  • vuex状态管理器简单理解

    使用过vue的人都知道vue实例有一个选项这么个东西,什么是选项呢.比如一个vue实例里的el,data,c...

  • vue spa 微信公众项目开发与填坑之旅

    Base vue-cli3.0 注入插件 1. vuex=>支持状态管理器 2.vuex-persistedsta...

  • 8 - Redux 简介

    简介 Redux 是 JavaScript 状态管理器。跟 Vuex 很相似,但又不同于 Vuex。 Redux ...

  • vuex状态持久化 方案一

    vuex状态持久化 方案一 前言 我们都知道Vuex是一个状态管理器,而他的缺点也很明确,在页面刷新之后,Vuex...

  • React redux ( 状态管理器 )

    简介 : Redux 是 JavaScript 状态管理器。跟 Vuex 很相似,但又不同于 Vuex。 Redu...

  • 第一次使用vuex

    介绍: vuex是一个状态管理器,也可以作为一个数据仓库使用。vuex可以将全局的数据做一个数据共享,例如,以前我...

网友评论

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

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