vuex的使用

最新推荐文章于 2024-10-23 13:40:03 发布

原创最新推荐文章于 2024-10-23 13:40:03 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍如何使用Vuex进行状态管理，特别是在页面间传递ID时的解决方案。通过定义store来集中管理应用的状态，并提供了诸如登录、登出及设置特定ID等方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面跳转太多传id太麻烦用vuex
封装一些方法

这是store的文件下的index.js

import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({
state: {
token:localStorage.getItem(‘token’) || ‘’,
user:localStorage.getItem(‘user’) || ‘’,
vipId:localStorage.getItem(‘vipId’) || ‘’, //贵宾id
teacherId:localStorage.getItem(‘teacherId’) || ‘’, //美容师id
proId:localStorage.getItem(‘proId’) || ‘’, //美容师id
},

mutations: {
login(state, payload){
state.token = payload.token;
state.user = payload.userName;
localStorage.setItem(‘token’, payload.token);
localStorage.setItem(‘user’, payload.userName);

  },
  logout(state){
	  window.location.reload()
	   // state.token = '';
	   // state.user = '';
	   localStorage.clear()
  },
  setVip(state,payload){
	  state.vipId = payload;
	  localStorage.setItem('vipId', payload);
  },
  setTeacher(state,payload){
	  state.teacherId = payload;
	  localStorage.setItem('teacherId', payload);
  },
  setPro(state,payload){
	  state.proId = payload;
	  localStorage.setItem('proId', payload);
  },

},
actions: {
},
modules: {
}
})

其他页面使用这是存id
this.$store.commit(‘setVip’, row.id);

这是获取id
this.$store.state.payload;