Vuex探險：更新vuex值得兩種方法

需求：

當我在修改我的個人信息的時候，如用戶名，密碼，希望能夠動態的改變（當然也會動態的更新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
        }
      }
      )
    }

補充：