Vuex探险：更新vuex值得两种方法

最新推荐文章于 2024-08-07 23:56:33 发布

wang0112233

最新推荐文章于 2024-08-07 23:56:33 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js和前端的探险文章标签： vuex actions mutation vue token

本文链接：https://blog.youkuaiyun.com/wang0112233/article/details/90670005

js和前端的探险专栏收录该内容

13 篇文章

订阅专栏

博客围绕Vuex配置展开，以修改个人信息时动态更新用户信息和token为需求，介绍了store入口文件index.js的配置、actions和mutations配置、getters.js配置以及main.js引入index.js的配置，还提及了mutation和action的区别。

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

需求：

当我在修改我的个人信息的时候，如用户名，密码，希望能够动态的改变（当然也会动态的更新token，但是我们的token是可以对外开发的比如说是存在windows中，但是像用户信息这类信息就不能存在window中了）

当我登入的时候已经帮我把用户信息（user）和token放在了vuex中，那我更新的时候如何修改呢

vuex的样式：

store的入口文件index.js的配置（声明状态，注册）

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'


import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})

export default store

actions配置，传参配置，mutations配置

（一条重要的原则就是要记住 mutation 必须是同步函数

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

）

import router from '@/router'
import { MessageBox } from 'element-ui'
import userApi from '@/api/user'
import routerUtil from '@/utils/routerUtil'

const user = {
  state: {
    user: {
      id: '',
      createTime: '',
      userName: '',
      realName: '',
      password: '',
      roles: []
    },
    token: '',
    menuList: []
  },

  mutations: {
    SET_USER: (state, user) => {
      state.user = user
    },
   
    SET_TOKEN: (state, token) => {
      state.token = token
    },
   
  },

  actions: {
    login ({ commit }, loginParam) {
      return new Promise((resolve, reject) => {
        userApi.login(loginParam).then(response => {
          const res = response.data

          window.localStorage.setItem('token', res.data.token)
          commit('SET_TOKEN', res.data.token)

          resolve(response)
        }).catch(error => {
          console.log(error)
          reject(error)
        })
      })
    },
    getUserInfo ({ commit }) {
      return new Promise((resolve, reject) => {
        userApi.getUserInfo().then(response => {
          const res = response.data
          commit('SET_USER', res.data)

          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },
   
    logOut ({ commit }) {
      MessageBox.confirm('确认退出吗？', '提示', {
        type: 'warning'
      }).then(() => {
        commit('SET_TOKEN', '')
        window.localStorage.removeItem('token')
        router.push('/login')
      })
    },
    setUser ({ commit }, user) {
      commit('SET_USER', user)
    }
  }
}

export default user

getters.js的配置

const getters = {
 
  user: state => state.user.user,
 
}
export default getters

main.js引入index.js的配置

我这边以setUser例，save方法（）

save () {
      userApi.save(this.dialogConfig.formData).then(response => {
        const res = response.data
        if (res.code === 200) {
          if (res.data.token !== undefined) {
            //直接修改浏览器的token，避免token改变无法登入
            window.localStorage.setItem('token', res.data.token)
            //通过vuex修改用户信息
            this.$store.dispatch('setUser', res.data.user)
          }
            //这边是调用子组件的属性和方法
          this.$refs.table.getTable()
          this.$refs.dialog.visible = false
        }
      }
      )
    }

补充：