把token存到vuex中

不要睡觉哦i

已于 2022-06-10 09:26:28 修改

阅读量722

点赞数

文章标签： vue

于 2021-08-17 16:53:41 首次发布

本文链接：https://blog.csdn.net/SYXZSs/article/details/119759977

版权

本文详细介绍了如何在Vue.js应用中使用Vuex进行状态管理，特别是针对登录功能的实现。首先在state中定义了token变量，然后在mutations中创建了一个SET_TOKEN方法用于设置token。在登录页面，当用户成功登录后，通过actions的loginFn方法将后端返回的token保存到Vuex中，确保全局状态的一致性。

摘要由CSDN通过智能技术生成

我这里模块化管理，直接从user.js里开始

user.js是引入到index.js里的

 //首先我们在state里定义一个token变量
state: {
        token:''
},

 //然后在mutations里，写一个token赋值的方法
mutations: {
 // SET_TOKEN 是方法名
	SET_TOKEN: (state, token) => {
      state.token = token
    },
},

下面我们来到登录页，写登录功能

	// 代码省略
login(账号密码).then(res)=>{
	// 这里的loginFn就是我们在vuex中 和 actions里的方法对应，后面的值就是后台返回的token值
    this.$store.dispatch("loginFn", res.headers.token)
}

再回到vuex页面

// 我们在mutations的对象下  添加一个actions
actions: {
登录成功后 就会调用这个loginFn方法，然后token也是登录成功后一起传的
    loginFn({ commit }, token) {
      return new Promise((resolve, reject) => {
      // 这里就是把token存到了xuex中了
        commit('SET_TOKEN', token)
      })
    },
  }