vuex的使用

1、src下新建 store/user.js(用不同的js文件存放不同的数据)

import Cookie from 'js-cookie'
export default{
    state:{
        token:''
    },
    mutations:{
        setToken(state,val){
            state.token = val
            Cookie.set('token',val)
        },
        // 清除
        clearToken(state){
            state.token = ''
            Cookie.remove('token')
        },
        // 获取
        getToken(state){
            state.token =  Cookie.get('tooken') || state.token
        }
    }
}

2、src下新建 store/index.js(将相关的数据文件引入)

	import Vue from 'vue'
	import Vuex from 'vuex'
	import tab from './tab'
	import user from './user'
	
	Vue.use(Vuex)
	
	export default new Vuex.Store({
	    modules:{
	        tab,
	        user
	    },
	})

3、main.js中引入store

	import store from './store' 
	
	router.beforeEach((to,from,next) => {
	  store.commit('getToken')
	  const token = store.state.user.token
	  if(!token && to.name !== 'login'){
	      console.log(token,'wu');
	      next({name:'login'})
	  }else if(token && to.name === 'login'){
	      console.log(token,'you');
	      next({name:'home'})
	  }else{
	      console.log(111111111111,token);
	      next()
	  }
	})
	new Vue({
	  render: h => h(App),
	  router,
	  store,
	  created(){
	    store.commit('addMenu',router)
	  }
	}).$mount('#app')
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值